WIXLIB

angular-material#angularmaterial

Table of ContentsAbout1Chapter 1: Getting started with ation or Setup4Installing Angular Material4Getting Started (blank shell)5Setting up with the CDN6Master (HEAD)7Chapter 2: md-button9Examples9Types of9Creating an icon button10Standard button11Chapter 3: md-card13Introduction13Remarks13Examples13Basic card with header13Card with actions13Card with Avatar and image14Chapter 4: md-chipsExamples1515Static chips15Setting the delay to select a new chip before refocusing on the input (1.1.2)15Credits17

AboutYou can share this PDF with anyone you feel could benefit from it, downloaded the latest versionfrom: angular-materialIt is an unofficial and free angular-material ebook created for educational purposes. All the contentis extracted from Stack Overflow Documentation, which is written by many hardworking individualsat Stack Overflow. It is neither affiliated with Stack Overflow nor official angular-material.The content is released under Creative Commons BY-SA, and the list of contributors to eachchapter are provided in the credits section at the end of this book. Images may be copyright oftheir respective owners unless otherwise specified. All trademarks and registered trademarks arethe property of their respective company owners.Use the content presented in this book at your own risk; it is not guaranteed to be correct noraccurate, please send your feedback and corrections to info@zzzprojects.comhttps://riptutorial.com/1

Chapter 1: Getting started with angularmaterialRemarksAngular Material is an UI component framework that allows you to produce single-page-applicationusing a set of predefined components and directives.VersionsVersionRelease ptutorial.com/2

VersionRelease l.com/3

VersionRelease lation or SetupInstalling Angular Materialnpmhttps://riptutorial.com/4

npm install angular-material --savebowerbower install angular-material --savejspmjspm install angular-materialFrom Cloudcdnjs jsdelivr googlecdnGetting Started (blank shell) html lang "en" head meta name "viewport" content "width device-width, initial-scale 1" !-- Angular Material style sheet -- link rel "stylesheet"href "http://ajax.googleapis.com/ajax/libs/angular material/1.1.4/angular-material.min.css" /head body ng-app "BlankApp" ng-cloak !-Your HTML content here-- !-- Angular Material requires Angular.js Libraries -- script src 5.11/angular.min.js" /script script src 5.11/angularanimate.min.js" /script script src 5.11/angulararia.min.js" /script script src 5.11/angularmessages.min.js" /script !-- Angular Material Library -- script src "http://ajax.googleapis.com/ajax/libs/angular material/1.1.4/angularmaterial.min.js" /script !-- Your application bootstrap -- script type "text/javascript" /*** You must include the dependency on 'ngMaterial'*/angular.module('BlankApp', ['ngMaterial']); /script /body /html https://riptutorial.com/5

Setting up with the CDNin the index.html, link the CSS from Google CDN link rel "stylesheet"href "https://ajax.googleapis.com/ajax/libs/angular material/1.1.1/angular-material.min.css" Required dependencies: angularangular-ariaangular-animateangular-messages !-- Angular Material requires Angular.js Libraries -- script src .5.5/angular.min.js" /script script src .5.5/angularanimate.min.js" /script script src .5.5/angulararia.min.js" /script script src .5.5/angularmessages.min.js" /script !-- Angular Material Library -- script src "https://ajax.googleapis.com/ajax/libs/angular material/1.1.0/angularmaterial.min.js" /script Link: tedindex.html !DOCTYPE html html ng-app "angularMaterial" head linkrel "stylesheet"href "https://ajax.googleapis.com/ajax/libs/angular material/1.1.1/angularmaterial.min.css" !-- Angular Material requires Angular.js Libraries -- scriptsrc .5.8/angular.min.js" /script script src .5.8/angularanimate.min.js" /script script src .5.8/angulararia.min.js" /script script src .5.8/angularmessages.min.js" /script !-- Angular Material Library -- script src "https://ajax.googleapis.com/ajax/libs/angular material/1.1.1/angularmaterial.min.js" /script script src "app.js" /script title Angular Material /title /head body ng-controller "MainController" md-content {{content}} /md-content /body https://riptutorial.com/6

/html app.jsangular.module('angularMaterial', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages']).controller('MainController', function( scope) { scope.content "Your content goes here.";})Master (HEAD)index.html: html ng-app "masterAngularMaterial" head !-- This is important (meta) -- meta name "viewport" content "width device-width, initial-scale 1" !-- Angular and other dependencies -- scriptsrc .5.11/angular.min.js" /script script src .5.11/angularanimate.min.js" /script script src .5.11/angulararia.min.js" /script script src .5.11/angularmessages.min.js" /script !-- Angular Material -- script src ter/angularmaterial.min.js" /script link href ter/angularmaterial.min.css" rel "stylesheet" script src "/path/to/app.js" /script /head body md-content ng-controller "SomeController" {{content}} /md-content /body /html app.js:angular.module('masterAngularMaterial', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages']).controller('SomeController', function( scope) { scope.content "Your content here.";})Note that importing from https://raw.githubusercontent.com will show this error:Refused to execute script from terial/master/angular-material.min.js' because its MIME type ('text/plain') is notexecutable, and strict MIME type checking is enabled.Read Getting started with angular-material online: l.com/7

aterialhttps://riptutorial.com/8

Chapter 2: md-buttonExamplesTypes ofMake sure you link the Angular and Angular Material libraries!index.html: html ng-app "mdButtonApp" head !-- Import Angular -- scriptsrc .5.8/angular.min.js" /script script src .5.8/angularanimate.min.js" /script script src .5.8/angulararia.min.js" /script !-- Angular Material -- script src "https://ajax.googleapis.com/ajax/libs/angular material/1.5.8/angularmaterial.min.js" /script link href "https://ajax.googleapis.com/ajax/libs/angular material/1.1.1/angularmaterial.min.css" rel "stylesheet" script src "app.js" /script /head body md-content ng-controller "mdButtonController" !-- Normal md-button -- md-button Normal /md-button md-button class "md-primary" {{text}} /md-button md-button class "md-accent" {{text}} /md-button md-button class "md-warn" ng-href "{{link}}" Google /md-button md-button class "md-raised" ng-click "goToLink('http://example.com')" Link /mdbutton md-button class "md-cornered md-primary md-hue-1" {{text}} /md-button md-button class "md-accent md-hue-2" Some Button /md-button md-button class "md-warn md-hue-3" ng-href "{{link}}" {{text}} /md-button /md-content /body /html app.js:angular.module('mdButtonApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages']).controller('mdButtonController', function( scope) { scope.text "Button"; scope.link "https://google.com"; scope.goToLink function(link) {// Go to some siteconsole.log('Redirecting to:' link);window.location.href link;}})https://riptutorial.com/9

Creating an icon buttonThis example will be using the class md-icon-button, which must be applied to md-button in orderto get an icon button. It is also recommended to add an aria-label attribute to md-button for accessibility purposeor the ARIA provider will throw a warning that there is no aria-label. Usually, there is an md-icon element in the md-button attribute. Optionally, there also may be an md-tooltip element to provide tooltips for the button.This example will be using Material Icons by Google.index.html: html ng-app "mdIconButtonApp" head !-- Import Angular -- scriptsrc .5.11/angular.min.js" /script script src .5.11/angularanimate.min.js" /script script src .5.11/angulararia.min.js" /script !-- Angular Material -- script src "https://ajax.googleapis.com/ajax/libs/angular material/1.5.11/angularmaterial.min.js" /script link href "https://ajax.googleapis.com/ajax/libs/angular material/1.1.4/angularmaterial.min.css" rel "stylesheet" !-- Material Icons -- link href "https://fonts.googleapis.com/icon?family Material Icons"rel "stylesheet" !-- Roboto -- link href "https://fonts.googleapis.com/css?family Roboto" rel "stylesheet" !-- app.js -- script src "app.js" /script style body {font-family: Roboto, sans-serif;} /style /head body md-content ng-controller "mdIconButtonController" !-Normal md-button Note that it is recommended to add a aria-label to md-icon-button foraccessibility purposes.-- md-button class "md-icon-button" aria-label "{{ariaLabel}}" md-icon class "material-icons" menu /md-icon /md-button md-button class "md-primary md-icon-button" aria-label "{{ariaLabel}}" md-icon class "material-icons" menu /md-icon md-tooltip This is a tooltip! /md-tooltip /md-button md-button class "md-accent md-icon-button md-fab" ngclick "goToLink('https://github.com/android')" aria-label "Go To Android" https://riptutorial.com/10

md-icon class "material-icons" android /md-icon /md-button md-button class "md-warn md-icon-button" ng-href "{{link}}" arialabel "{{ariaLabel}}" md-icon class "material-icons" {{icon}} /md-icon /md-button md-button class "md-raised md-icon-button" ngclick "goToLink('http://example.com')" !-- Note that you must have mdIconProvider for this -- md-icon md-svg-icon "link" /md-icon /md-button md-button class "md-cornered md-primary md-hue-1 md-icon-button" arialabel "{{ariaLabel}}" !-- You can also use the source of SVG -- md-icon md-svg-src "/path/to/more.svg" /md-icon /md-button md-button class "md-accent md-hue-2" aria-label "{{ariaLabel}}" md-icon class "material-icons" g-translate /md-icon /md-button md-button class "md-warn md-hue-3 md-icon-button" ng-href "{{link}}" arialabel "Link" md-icon md-svg-icon "copyright" /md-icon /md-button /md-content /body /html app.js:angular.module('mdIconButtonApp', ['ngAnimate', 'ngAria', 'ngMaterial', 'ngMessages']).config(function( mdIconProvider) {// Configure iconsets: More vice/ mdIconProvider -icon', uttonController', function( scope) { scope.ariaLabel "Button"; scope.icon "menu"; scope.link "https://google.com"; scope.goToLink function(link) {// Go to some siteconsole.log('Redirecting to:' link);window.location.href link;}})Standard buttonSo, well, how on earth do you create a md-button , you may ask? All you have to do is to enter a md-button , along with your text for the button in it.index.html: div ng-app "MdButtonApp" md-content ng-controller "Controller" https://riptutorial.com/11

h2 class "md-title" Simple code md-button /code /h2 md-button Some button /md-button /md-content /div app.js:// Just initialize the appangular.module('MdButtonApp', ['ngMaterial']).controller('Controller', function( scope) {})Codepen DemoRead md-button online: 1/md-buttonhttps://riptutorial.com/12

Chapter 3: md-cardIntroductionThis topic is about how to create a md-card , which you can use for blog posts and other things.RemarksAPI Documentation: mdCardExamplesBasic card with header md-card md-card-header md-card-header-text span class "md-title" This will be the title /span span class "md-subhead" Here goes the (smaller, lighter) sub-header /span /md-card-header-text /md-card-header md-card-content p Your content goes here! /p /md-card-content /md-card Card with actionsIf you want your card to include buttons, use the md-card-actions directive. Buttons can also beformatted differently for icon-only buttons. Search for icons at here if you're using Google'sMaterial Icons. md-card !--header-- md-card-content p Your content goes here! /p /md-card-content md-card-actions md-button Save /md-button md-button Cancel /md-button md-card-icon-actions md-button aria-label "icon" class "md-icon-button" md-icon help /md-icon /md-button /md-card-icon-actions /md-card-actions https://riptutorial.com/13