angular Material Archives - Donotsad where can learn any thing work project and make money

Aug 10

Angular Material – Themes

Angular Material – Theme ”; Previous Next The Angular Material components use the intention group classes like md-primary, md-accent, md-warn and additional classes for color differences like md-hue-1, md-hue-2, or md-hue-3. The following components supporrt the use of the above mentioned classes. md-button md-checkbox md-progress-circular md-progress-linear md-radio-button md-slider md-switch md-tabs md-text-float md-toolbar Themes can be configured using $mdThemingProvider during application configuration. The following properties can be used to assign different color palletes. primaryPalette accentPalette warnPalette backgroundPalette Example The following example shows the use of themes in Angular JS application. am_themes.htm Live Demo <html lang = “en”> <head> <link rel = “stylesheet” href = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css”> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js”></script> <link rel = “stylesheet” href = “https://fonts.googleapis.com/icon?family=Material+Icons”> <script language = “javascript”> angular .module(”firstApplication”, [”ngMaterial”]) .controller(”themeController”, themeController) .config(function($mdThemingProvider) { $mdThemingProvider.theme(”customTheme”) .primaryPalette(”grey”) .accentPalette(”orange”) .warnPalette(”red”); }); function themeController ($scope) { } </script> </head> <body ng-app = “firstApplication”> <div id = “themeContainer” ng-controller = “themeController as ctrl” ng-cloak> <md-toolbar class = “md-primary”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Default Theme</h2> </div> </md-toolbar> <hr/> <md-card> <md-card-content layout = “column”> <md-toolbar class = “md-primary”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-primary style</h2> </div> </md-toolbar> <md-toolbar class = “md-primary md-hue-1”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-primary md-hue-1 style</h2> </div> </md-toolbar> <md-toolbar class = “md-primary md-hue-2”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-primary md-hue-2 style</h2> </div></md-toolbar> <md-toolbar class = “md-accent”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-accent style</h2> </div> </md-toolbar> <md-toolbar class = “md-accent md-hue-1”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-accent md-hue-1 style</h2> </div> </md-toolbar> <md-toolbar class = “md-accent md-hue-2”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-accent md-hue-2 style</h2> </div> </md-toolbar> <md-toolbar class = “md-warn”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-warn style</h2> </div> </md-toolbar> <md-toolbar class = “md-warn md-hue-1”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-warn md-hue-1 style</h2> </div> </md-toolbar> <md-toolbar class = “md-warn md-hue-2”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-warn md-hue-2 style</h2> </div> </md-toolbar> </md-card-content> </md-card> <div md-theme = “customTheme”> <md-toolbar class = “md-primary”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Custom Theme</h2> </div> </md-toolbar> <hr/> <md-card> <md-card-content layout = “column”> <md-toolbar class = “md-primary”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-primary style</h2> </div> </md-toolbar> <md-toolbar class = “md-primary md-hue-1”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-primary md-hue-1 style</h2> </div> </md-toolbar> <md-toolbar class = “md-primary md-hue-2”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-primary md-hue-2 style</h2> </div> </md-toolbar> <md-toolbar class = “md-accent”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-accent style</h2> </div> </md-toolbar> <md-toolbar class = “md-accent md-hue-1”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-accent md-hue-1 style</h2> </div> </md-toolbar> <md-toolbar class = “md-accent md-hue-2”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-accent md-hue-2 style</h2> </div> </md-toolbar> <md-toolbar class = “md-warn”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-warn style</h2> </div> </md-toolbar> <md-toolbar class = “md-warn md-hue-1”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-warn md-hue-1 style</h2> </div> </md-toolbar> <md-toolbar class = “md-warn md-hue-2”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>Using md-warn md-hue-2 style</h2> </div> </md-toolbar> </md-card-content> </md-card> </div> </div> </body> </html> Result Verify the result. Print Page Previous Next Advertisements ”;

Aug 10

Angular Material – SideNav

Angular Material – SideNav ”; Previous Next The md-sidenav, an Angular directive is used to show a container component which can be shown or hide programmatically. It slides out over the top of the main content region by default. Attributes The following table lists out the parameters and description of the different attributes of md-sidenav Sr.No Parameter & Description 1 md-is-open A model bound to whether the sidenav is opened. 2 md-component-id componentId to use with $mdSidenav service. 3 md-is-locked-open When this expression evalutes to true, the sidenav ”locks open”: it falls into the content”s flow instead of appearing over it. This overrides the is-open attribute. The $mdMedia() service is exposed to the is-locked-open attribute, which can be given a media query or one of the sm, gt-sm, md, gt-md, lg or gt-lg presets. Examples − <md-sidenav md-is-locked-open = “shouldLockOpen”></md-sidenav> <md-sidenav md-is-locked-open = “$mdMedia(”min-width: 1000px”)”></mdsidenav> <md-sidenav md-is-locked-open = “$mdMedia(”sm”)”></md-sidenav> <!–(locks open on small screens)–> Example The following example shows the use of md-sidenav and also the uses of the sidenav component. am_sidenav.htm Live Demo <html lang = “en”> <head> <link rel = “stylesheet” href = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css”> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js”></script> <link rel = “stylesheet” href = “https://fonts.googleapis.com/icon?family=Material+Icons”> <script language = “javascript”> angular .module(”firstApplication”, [”ngMaterial”]) .controller(”sideNavController”, sideNavController); function sideNavController ($scope, $mdSidenav) { $scope.openLeftMenu = function() { $mdSidenav(”left”).toggle(); }; $scope.openRightMenu = function() { $mdSidenav(”right”).toggle(); }; } </script> </head> <body ng-app = “firstApplication”> <div id = “sideNavContainer” ng-controller = “sideNavController as ctrl” layout = “row” ng-cloak> <md-sidenav md-component-id = “left” class = “md-sidenav-left”> Welcome to TutorialsPoint.Com</md-sidenav> <md-content> <md-button ng-click = “openLeftMenu()”>Open Left Menu</md-button> <md-button ng-click = “openRightMenu()”>Open Right Menu</md-button> </md-content> <md-sidenav md-component-id = “right” class = “md-sidenav-right”> <md-button href = “http://google.com”>Google</md-button> </md-sidenav> </div> </body> </html> Result Verify the result. Print Page Previous Next Advertisements ”;

Aug 10

Angular Material – Swipe

Angular Material – Swipe ”; Previous Next The Swipe functionality is meant for mobile devices. The following directives are used to handle swipes. md-swipe-down, an Angular directive is used to specify custom behavior when an element is swiped down. md-swipe-left, an Angular directive is used to specify custom behavior when an element is swiped left. md-swipe-right, an Angular directive is used to specify custom behavior when an element is swiped right. md-swipe-up, an Angular directive is used to specify custom behavior when an element is swiped up. Example The following example shows the use of md-swipe-* and also the uses of swipe components. am_swipes.htm Live Demo <html lang = “en”> <head> <link rel = “stylesheet” href = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css”> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js”></script> <link rel = “stylesheet” href = “https://fonts.googleapis.com/icon?family=Material+Icons”> <style> .swipeContainer .demo-swipe { padding: 20px 10px; } .swipeContainer .no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style> <script language = “javascript”> angular .module(”firstApplication”, [”ngMaterial”]) .controller(”swipeController”, swipeController); function swipeController ($scope) { $scope.onSwipeLeft = function(ev) { alert(”Swiped Left!”); }; $scope.onSwipeRight = function(ev) { alert(”Swiped Right!”); }; $scope.onSwipeUp = function(ev) { alert(”Swiped Up!”); }; $scope.onSwipeDown = function(ev) { alert(”Swiped Down!”); }; } </script> </head> <body ng-app = “firstApplication”> <md-card> <div id = “swipeContainer” ng-controller = “swipeController as ctrl” layout = “row” ng-cloak> <div flex> <div class = “demo-swipe” md-swipe-left = “onSwipeLeft()”> <span class = “no-select”>Swipe me to the left</span> <md-icon md-font-icon = “android” aria-label = “android”></md-icon> </div> <md-divider></md-divider> <div class = “demo-swipe” md-swipe-right = “onSwipeRight()”> <span class = “no-select”>Swipe me to the right</span> </div> </div> <md-divider></md-divider> <div flex layout = “row”> <div flex layout = “row” layout-align = “center center” class = “demo-swipe” md-swipe-up = “onSwipeUp()”> <span class = “no-select”>Swipe me up</span> </div> <md-divider></md-divider> <div flex layout = “row” layout-align = “center center” class = “demo-swipe” md-swipe-down = “onSwipeDown()”> <span class = “no-select”>Swipe me down</span> </div> </div> </div> </md-card> </body> </html> Result Verify the result. Print Page Previous Next Advertisements ”;

Aug 10

Angular Material – WhiteFrame

Angular Material – WhiteFrame ”; Previous Next Angular Material has several special classes to display containers as paper-like cards with shadow. The following table lists down the different classes with their description. Given below is the list of different classes with their description. Sr.No Class Name & Description 1 md-whiteframe-1dp This styles a container for any HTML content with 1px bordered shadow. Adds zdepth of 1. 2 md-whiteframe-2dp This styles a container for any HTML content with 2px bordered shadow. Adds zdepth of 2. 3 md-whiteframe-3dp This styles a container for any HTML content with 3px bordered shadow. Adds zdepth of 3. 4 md-whiteframe-4dp This styles a container for any HTML content with 4px bordered shadow. Adds zdepth of 4. 5 md-whiteframe-5dp This styles a container for any HTML content with 5px bordered shadow. Adds zdepth of 5. 6 md-whiteframe-6dp This styles a container for any HTML content with 6px bordered shadow. Adds zdepth of 6. 7 md-whiteframe-7dp This styles a container for any HTML content with 7px bordered shadow. Adds zdepth of 7. 8 md-whiteframe-8dp This styles a container for any HTML content with 8px bordered shadow. Adds zdepth of 8. 9 md-whiteframe-9dp This styles a container for any HTML content with 9px bordered shadow. Adds zdepth of 9. 10 md-whiteframe-10dp This styles a container for any HTML content with 10px bordered shadow. Adds z-depth of 10. 11 md-whiteframe-11dp This styles a container for any HTML content with 11px bordered shadow. Adds z-depth of 11. 12 md-whiteframe-12dp This styles a container for any HTML content with 12px bordered shadow. Adds z-depth of 12. 13 md-whiteframe-13dp This styles a container for any HTML content with 13px bordered shadow. Adds z-depth of 13. 14 md-whiteframe-14dp This styles a container for any HTML content with 14px bordered shadow. Adds z-depth of 14. 15 md-whiteframe-15dp This styles a container for any HTML content with 15px bordered shadow. Adds z-depth of 15. 16 md-whiteframe-16dp This styles a container for any HTML content with 16px bordered shadow. Adds z-depth of 16. 17 md-whiteframe-17dp This styles a container for any HTML content with 17px bordered shadow. Adds z-depth of 17. 18 md-whiteframe-18dp This styles a container for any HTML content with 18px bordered shadow. Adds z-depth of 18. 19 md-whiteframe-19dp This styles a container for any HTML content with 19px bordered shadow. Adds z-depth of 19. 20 md-whiteframe-20dp This styles a container for any HTML content with 20px bordered shadow. Adds z-depth of 20. 21 md-whiteframe-21dp This styles a container for any HTML content with 21px bordered shadow. Adds z-depth of 21. 22 md-whiteframe-22dp This styles a container for any HTML content with 22px bordered shadow. Adds z-depth of 22. 23 md-whiteframe-23dp This styles a container for any HTML content with 23px bordered shadow. Adds z-depth of 23. 24 md-whiteframe-24dp This styles a container for any HTML content with 24px bordered shadow. Adds z-depth of 24. Example The following example shows the use of shadow classes. am_whiteframes.htm Live Demo <html lang = “en”> <head> <link rel = “stylesheet” href = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css”> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js”></script> <link rel = “stylesheet” href = “https://fonts.googleapis.com/icon?family=Material+Icons”> <style> .frameContainer md-whiteframe { background: #fff; margin: 30px; height: 100px; } </style> <script language = “javascript”> angular .module(”firstApplication”, [”ngMaterial”]) .controller(”frameController”, frameController); function frameController ($scope) { } </script> </head> <body ng-app = “firstApplication”> <div class = “frameContainer” ng-controller = “frameController as ctrl” layout = “row” layout-padding layout-wrap layout-fill style = “padding-bottom: 32px;” ng-cloak> <md-whiteframe class = “md-whiteframe-1dp” flex-sm = “45” flex-gt-sm = “35” flex-gt-md = “25” layout layout-align = “center center”> <span>.md-whiteframe-1dp</span> </md-whiteframe> <md-whiteframe class = “md-whiteframe-2dp” flex-sm = “45” flex-gt-sm = “35” flex-gt-md = “25” layout layout-align = “center center”> <span>.md-whiteframe-2dp</span> </md-whiteframe> <md-whiteframe class = “md-whiteframe-3dp” flex-sm = “45” flex-gt-sm = “35” flex-gt-md = “25” layout layout-align = “center center”> <span>.md-whiteframe-3dp</span> </md-whiteframe> <md-whiteframe class = “md-whiteframe-10dp” flex-sm = “45” flex-gt-sm = “35” flex-gt-md = “25” layout layout-align = “center center”> <span>.md-whiteframe-10dp</span> </md-whiteframe> <md-whiteframe class = “md-whiteframe-15dp” flex-sm = “45” flex-gt-sm = “35” flex-gt-md = “25” layout layout-align = “center center”> <span>.md-whiteframe-15dp</span> </md-whiteframe> <md-whiteframe class = “md-whiteframe-20dp” flex-sm = “45” flex-gt-sm = “35” flex-gt-md = “25” layout layout-align = “center center”> <span>.md-whiteframe-20dp</span> </md-whiteframe> <md-whiteframe class = “md-whiteframe-22dp” flex-sm = “45” flex-gt-sm = “35” flex-gt-md = “25” layout layout-align = “center center”> <span>.md-whiteframe-22dp</span> </md-whiteframe> <md-whiteframe class = “md-whiteframe-23dp” flex-sm = “45” flex-gt-sm = “35” flex-gt-md = “25” layout layout-align = “center center”> <span>.md-whiteframe-23dp</span> </md-whiteframe> <md-whiteframe class = “md-whiteframe-24dp” flex-sm = “45” flex-gt-sm = “35” flex-gt-md = “25” layout layout-align = “center center”> <span>.md-whiteframe-24dp</span> </md-whiteframe> </div> </body> </html> Result Verify the result. Print Page Previous Next Advertisements ”;

Aug 10

Angular Material – Switches

Angular Material – Switches ”; Previous Next The md-switch, an Angular directive, is used to show a switch. Attributes The following table lists out the parameters and description of the different attributes of md-switch. Sr.No Parameter & Description 1 * ng-model The assignable angular expression to data-bind to. 2 name The property name of the form under which the control is published. 3 ng-true-value The value to which the expression should be set when selected. 4 ng-false-value The value to which the expression should be set when not selected. 5 ng-change The Angular expression to be executed when input changes due to user interaction with the input element. 6 ng-disabled En/Disable based on the expression. 7 md-no-ink The use of attribute indicates the use of ripple ink effects. 8 aria-label This publishes the button label used by the screen-readers for accessibility. This defaults to the switch”s text. Example The following example shows the use of md-swipe-* and also the uses of swipe components. am_switches.htm Live Demo <html lang = “en”> <head> <link rel = “stylesheet” href = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css”> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js”></script> <link rel = “stylesheet” href = “https://fonts.googleapis.com/icon?family=Material+Icons”> <script language = “javascript”> angular .module(”firstApplication”, [”ngMaterial”]) .controller(”switchController”, switchController); function switchController ($scope) { $scope.data = { switch1: true, switch2: false, switch3: false, switch4: true, switch5: true, switch6: false }; $scope.message = ”false”; $scope.onChange = function(state) { $scope.message = state; }; } </script> </head> <body ng-app = “firstApplication”> <div id = “switchContainer” ng-controller = “switchController as ctrl” layout = “column” ng-cloak> <md-switch ng-model = “data.switch1” aria-label = “Switch 1”> Switch 1: {{ data.switch1 }} </md-switch> <md-switch ng-model = “data.switch2” aria-label = “Switch 2” ng-true-value = “”true”” ng-false-value = “”false”” class = “md-warn”> Switch 2 (md-warn): {{ data.switch2 }} </md-switch> <md-switch ng-disabled = “true” aria-label = “Disabled switch” ng-model = “disabledModel”> Switch 3 (Disabled) </md-switch> <md-switch ng-disabled = “true” aria-label = “Disabled active switch” ng-model = “data.switch4”> Switch 4 (Disabled, Active) </md-switch> <md-switch class = “md-primary” md-no-ink aria-label = “Switch No Ink” ng-model = “data.switch5”> Switch 5 (md-primary): No Ink </md-switch> <md-switch ng-model = “data.switch6” aria-label = “Switch 6” ng-change = “onChange(data.switch6)”> Switch 6 : {{ message }} </md-switch> </div> </body> </html> Result Verify the result. Print Page Previous Next Advertisements ”;

Aug 10

Angular Material – Useful Resources

Angular Material – Useful Resources ”; Previous Next The following resources contain additional information on Angular Material. Please use them to get more in-depth knowledge on this topic. Useful Video Courses E-commerce Web with Angular 8 (Material) and Firebase Featured 61 Lectures 5 hours University Code More Detail Angular – The Complete Course 14 Lectures 48 mins Ganesh Kavhar More Detail Master Spring & Angular Material with a full web application Best Seller 28 Lectures 2.5 hours Ali Bouali More Detail Android Material UI Design Masterclass with Adobe Xd 36 Lectures 6.5 hours Stevdza-San More Detail Learn Web Development with HTML, CSS , Javascript ,Typescript, and Angular 30 Lectures 58 mins James Coonce More Detail SAP MM (Materials Management) Training Best Seller 43 Lectures 33.5 hours Uplatz More Detail Print Page Previous Next Advertisements ”;

Aug 10

Angular Material – Quick Guide

Angular Material – Quick Guide ”; Previous Next Angular Material – Overview Angular Material is a UI component library for Angular JS developers. Angular Material”s reusable UI components help in constructing attractive, consistent, and functional web pages and web applications while adhering to modern web design principles like browser portability, device independence, and graceful degradation. Following are a few salient features of Angular Material − In-built responsive designing. Standard CSS with minimal footprint. Includes new versions of common user interface controls such as buttons, check boxes, and text fields which are adapted to follow Material Design concepts. Includes enhanced and specialized features like cards, toolbar, speed dial, side nav, swipe, and so on. Cross-browser, and can be used to create reusable web components. Responsive Design Angular Material has in-built responsive designing so that the website created using Angular Material will redesign itself as per the device size. Angular Material classes are created in such a way that the website can fit any screen size. The websites created using Angular Material are fully compatible with PC, tablets, and mobile devices. Extensible Angular Material is by design very minimal and flat. It is designed considering the fact that it is much easier to add new CSS rules than to overwrite existing CSS rules. It supports shadows and bold colors. The colors and shades remain uniform across various platforms and devices. And most important of all, Angular Material is absolutely free to use. Angular Material – Environment Setup How to Use Angular Material? There are two ways to use Angular Material − Local Installation − You can download the Angular Material libraries using npm, jspm, or bower on your local machine and include it in your HTML code. CDN Based Version − You can include the angular-material.min.css and angular-material js files into your HTML code directly from the Content Delivery Network (CDN). Local Installation Befor we use the following npm command, we require the NodeJS installation on our system. To get information about node JS, click here and open the NodeJS command line interface. We will use the following command to install Angular Material libraries. npm install angular-material The above command will generate the following output − [email protected] node_modulesangular-animate [email protected] node_modulesangular-aria [email protected] node_modulesangular-messages [email protected] node_modulesangular [email protected] node_modulesangular-material npm will download the files under node_modules > angular-material folder. Include the files as explained in the following example − Example Now you can include the css and js file in your HTML file as follows − > Live Demo <html lang = “en”> <head> <link rel = “stylesheet” href = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css”> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js”></script> <script type = “text/javascript”> angular.module(”firstApplication”, [”ngMaterial”]); </script> </head> <body ng-app = “firstApplication” ng-cloak> <md-toolbar class = “md-warn”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>HTML 5</h2> </div> </md-toolbar> <md-content flex layout-padding> <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p> <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).</p> <p>The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p> </md-content> </body> </html> The above program will generate the following result − CDN Based Version You can include the angular-material.css and angular-material.js files into your HTML code directly from the Content Delivery Network (CDN). Google CDN provides content for the latest version. We are using the Google CDN version of the library throughout this tutorial. Example Now let us rewrite the above example using angular-material.min.css and angular-material.min.js from Google CDN. > Live Demo <html lang = “en” > <head> <link rel = “stylesheet” href = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css”> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js”></script> <script type = “text/javascript”> angular.module(”firstApplication”, [”ngMaterial”]); </script> </head> <body ng-app = “firstApplication” ng-cloak> <md-toolbar class = “md-warn”> <div class = “md-toolbar-tools”> <h2 class = “md-flex”>HTML 5</h2> </div> </md-toolbar> <md-content flex layout-padding> <p>HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.</p> <p>HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web ypertext Application Technology Working Group (WHATWG).</p> <p>The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.</p> </md-content> </body> </html> The above program will generate the following result − Angular Material – Autocomplete The md-autocomplete, an Angular Directive, is used as a special input control with an inbuilt dropdown to show all possible matches to a custom query. This control acts as a real-time suggestion box as soon as the user types in the input area. <md-autocomplete> can be used to provide search results from local or remote data sources. md-autocomplete caches results when performing a query. After first call, it uses the cached results to eliminate unnecessary server requests or lookup logic and it can be disabled. Attributes The following table lists out the parameters and description of the different attributes of md-autocomplete. Sr.No Parameter & Description 1 * md-items An expression in the format of item in items to iterate over matches for your search. 2 md-selected-item-change An expression to be run each time a new item is selected. 3 md-search-text-change An expression to be run each time the search text updates. 4 md-search-text A model to bind the search query text to. 5 md-selected-item A model to bind the selected item to. 6 md-item-text An expression that will convert your object to a single string. 7 placeholder Placeholder text that will be forwarded to the input. 8 md-no-cache Disables the internal caching that happens in autocomplete.

Aug 10

Angular Material – Subheaders

Angular Material – Subheaders ”; Previous Next The md-subheader, an Angular directive, is used to show a subheader for a section. Example The following example shows the use of md-subheader and also the uses of subheader component. am_subheaders.htm Live Demo <html lang = “en”> <head> <link rel = “stylesheet” href = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css”> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js”></script> <link rel = “stylesheet” href = “https://fonts.googleapis.com/icon?family=Material+Icons”> <script language = “javascript”> angular .module(”firstApplication”, [”ngMaterial”]) .controller(”subheaderController”, subheaderController); function subheaderController ($scope) { $scope.fruitNames = [”Apple”, ”Banana”, ”Orange”]; $scope.vegNames = [”Carrot”, ”Potato”, ”Cabbage”]; $scope.eateries = [”Milk”, ”Bread”]; } </script> </head> <body ng-app = “firstApplication”> <div id = “subheaderContainer” ng-controller = “subheaderController as ctrl” layout = “column” flex layout-fill ng-cloak> <md-toolbar md-scroll-shrink> <div class = “md-toolbar-tools”>Items</div> </md-toolbar> <md-content style = “height: 600px;”> <section> <md-subheader class = “md-primary”>Fruits</md-subheader> <md-list layout-padding> <md-list-item ng-repeat = “fruits in fruitNames”> <div> <p>{{fruits}}</p> </div> </md-list-item> </md-list> </section> <section> <md-subheader class = “md-warn”>Vegetables</md-subheader> <md-list layout-padding> <md-list-item ng-repeat = “veg in vegNames”> <div> <p>{{veg}}</p> </div> </md-list-item> </md-list> </section> <section> <md-subheader>Eateries</md-subheader> <md-list layout-padding> <md-list-item ng-repeat = “eatery in eateries”> <div> <p>{{eatery}}</p> </div> </md-list-item> </md-list> </section> </md-content> </div> </body> </html> Result Verify the result. Print Page Previous Next Advertisements ”;

Aug 10

Angular Material – Typography

Angular Material – Typography ”; Previous Next Angular Material provides various typography CSS classes which can be used to create visual consistency across Angular JS application. The following table lists down the different classes with their description. Sr.No Class Name & Description 1 md-display-1 Shows the text with Regular 34px. 2 md-display-2 Shows the text with Regular 45px. 3 md-display-3 Shows the text with Regular 56px. 4 md-display-4 Shows the text with Light 112px. 5 md-headline Shows the text with Regular 24px. 6 md-title Shows the text with Medium 20px. 7 md-subhead Shows the text with Regular 16px. 8 md-body-1 Shows the text with Regular 14px. 9 md-body-2 Shows the text with Medium 14px. 10 md-button Shows the button with Medium 14px. 11 md-caption Shows the text with Regular 12px. Example The following example shows the use of typography CSS classes. am_typography.htm Live Demo <html lang = “en”> <head> <link rel = “stylesheet” href = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css”> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js”></script> <link rel = “stylesheet” href = “https://fonts.googleapis.com/icon?family=Material+Icons”> <script language = “javascript”> angular .module(”firstApplication”, [”ngMaterial”]) .controller(”typographyController”, typographyController); function typographyController ($scope) { } </script> </head> <body ng-app = “firstApplication”> <div class = “frameContainer” ng-controller = “typographyController as ctrl” layout = “column” layout-padding layout-wrap layout-fill style = “padding-bottom: 32px;” ng-cloak> <p class = “md-display-4”>.md-display-4</p> <p class = “md-display-3”>.md-display-3</p> <p class = “md-display-2”>.md-display-2</p> <p class = “md-display-1”>.md-display-1</p> <p class = “md-headline”>.md-headline</p> <p class = “md-title”>.md-title</p> <p class = “md-subhead”>.md-subhead</p> <p class = “md-body-1”>.md-body-1</p> <p class = “md-body-2”>.md-body-2</p> <md-button>.md-button</md-button> <p class = “md-caption”>.md-caption</p> </div> </body> </html> Result Verify the result. Print Page Previous Next Advertisements ”;

Aug 10

Angular Material – Inputs

Angular Material – Inputs ”; Previous Next The md-input-container, an Angular directive, is a container component that contains any <input> or <textarea> element as a child. It also supports error handling using the standard ng-messages directives and animates the messages using the ngEnter/ngLeave events or the ngShow/ngHide events. Attributes The following table lists out the parameters and description of the different attributes of the md-input-container. Sr.No Parameter & Description 1 md-maxlength The maximum number of characters allowed in this input. If this is specified, a character counter will be shown underneath the input. The purpose of the md-maxlength is to show the max length counter text. If you don”t want the counter text and only need “plain” validation, you can use the “simple” ng-maxlength or maxlength attributes. 2 aria-label Aria-label is required when no label is present. A warning message will be logged in the console if a label is not present. 3 placeholder An alternative approach to using aria-label when the label is not present. The placeholder text is copied to the aria-label attribute. 4 md-no-autogrow When present, the textareas will not grow automatically. 5 md-detect-hidden When present, the textareas will be sized properly when they are revealed after being hidden. This is off by default for performance reasons because it guarantees a reflow every digest cycle. Example The following example shows the use of the md-input-container directive and also the uses of inputs. am_inputs.htm Live Demo <html lang = “en”> <head> <link rel = “stylesheet” href = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css”> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js”></script> <script src = “https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js”></script> <link rel = “stylesheet” href = “https://fonts.googleapis.com/icon?family=Material+Icons”> <style> </style> <script language = “javascript”> angular .module(”firstApplication”, [”ngMaterial”]) .controller(”inputController”, inputController); function inputController ($scope) { $scope.project = { comments: ”Comments”, }; } </script> </head> <body ng-app = “firstApplication”> <div id = “inputContainer” class = “inputDemo” ng-controller = “inputController as ctrl” ng-cloak> <md-content layout-padding> <form name = “projectForm”> <md-input-container class = “md-block”> <label>User Name</label> <input required name = “userName” ng-model = “project.userName”> <div ng-messages = “projectForm.userName.$error”> <div ng-message = “required”>This is required.</div> </div> </md-input-container> <md-input-container class = “md-block”> <label>Email</label> <input required type = “email” name = “userEmail” ng-model = “project.userEmail” minlength = “10” maxlength = “100” ng-pattern = “/^.+@.+..+$/” /> <div ng-messages = “projectForm.userEmail.$error” role = “alert”> <div ng-message-exp = “[”required”, ”minlength”, ”maxlength”, ”pattern”]”> Your email must be between 10 and 100 characters long and should be a valid email address. </div> </div> </md-input-container> <md-input-container class = “md-block”> <label>Comments</label> <input md-maxlength = “300” required name = “comments” ng-model = “project.comments”> <div ng-messages = “projectForm.comments.$error”> <div ng-message = “required”>This is required.</div> <div ng-message = “md-maxlength”>The comments has to be less than 300 characters long.</div> </div> </md-input-container> </form> </md-content> </div> </body> </html> Result Verify the result. Print Page Previous Next Advertisements ”;