{"id":21696330,"url":"https://github.com/dinanathsj29/angular-material-getting-started-tutorial","last_synced_at":"2026-01-04T07:43:30.217Z","repository":{"id":121989986,"uuid":"239258461","full_name":"dinanathsj29/angular-material-getting-started-tutorial","owner":"dinanathsj29","description":"Let's Learn what is Angular Material. How to start using Angular Material components to build/design/develop clean and elegant UI. Its practical guide for building Angular 7/8 applications with Angular Material.","archived":false,"fork":false,"pushed_at":"2020-02-15T13:47:59.000Z","size":2238,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-25T14:11:23.498Z","etag":null,"topics":["angular-cdk","angular-material","angular-material-7","angular-material-8","angular-material-components","angular-material-themes","google-material-design","mat-button","mat-checkbo","mat-checkbox","mat-radio","mat-sidenav","mat-table","material-components","material-design","material-icons","material-theme","material-themes","material-typography","schematics"],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dinanathsj29.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-02-09T06:32:53.000Z","updated_at":"2023-11-22T16:54:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"2981d6e8-7937-4631-8900-0db5f67f06b9","html_url":"https://github.com/dinanathsj29/angular-material-getting-started-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-material-getting-started-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-material-getting-started-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-material-getting-started-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dinanathsj29%2Fangular-material-getting-started-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dinanathsj29","download_url":"https://codeload.github.com/dinanathsj29/angular-material-getting-started-tutorial/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244635919,"owners_count":20485440,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular-cdk","angular-material","angular-material-7","angular-material-8","angular-material-components","angular-material-themes","google-material-design","mat-button","mat-checkbo","mat-checkbox","mat-radio","mat-sidenav","mat-table","material-components","material-design","material-icons","material-theme","material-themes","material-typography","schematics"],"created_at":"2024-11-25T19:19:29.715Z","updated_at":"2026-01-04T07:43:29.529Z","avatar_url":"https://github.com/dinanathsj29.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003e **Description**:\n\nLet's Learn what is Angular Material. How to start using Angular Material components to build/design/develop clean and elegant UI. Its practical guide for building Angular 7/8 applications with Angular Material.\n\n\u003e **Topics (separate with spaces)**:\nAdd topics to categorize your repository and make it more discoverable.\n\n- angular-material\n- angular-material-7\n- angular-material-8\n- material-design\n- google-material-design\n- material-components\n- material-icons\n- material-theme\n- mat-button\n- mat-checkbox\n- mat-table\n- schematics\n- mat-sidenav\n- mat-checkbox\n- mat-radio\n- angular-cdk\n- material-typography\n- material-themes\n- angular-material-components\n- angular-material-themes\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"_images-angular-material/angular-material-logo-1.png\" alt=\"Angular Material Logo\" title=\"Angular Material Logo\" width=\"200\" /\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"_images-angular-material/angular-material-logo-2.png\" alt=\"Angular Material Logo\" title=\"Angular Material Logo\" width=\"200\" /\u003e\n\u003c/p\u003e\n\nAngular Material getting started tutorial\n=====================\n\n- Angular Material is a UI component library (Material Design components for Angular)\n- Angular Material is a collection of components helps to keep application modern with slim sleek and intuitive look and feel\n\nThis tutorial explains the fundamental concepts of Angular Material.\n\nWelcome\n---------------------\n\nHi All, I'm **`Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional`**, I wanna welcome you to `Angular Material Getting started tutorial`.\n\nWho is this for? Audience\n---------------------\n\nThis Course/Tutorial is ideal for: \n- Professionals who aim to learn and start with the basics of Angular Material\n- Developers looking to get in-depth knowledge on the Angular Material Library\n- Students who want to dive deeper into Angular Material \n- Students who want to practice Angular Material\n\nPrerequisites for current course / What you need to know\n---------------------\n\n- HTML5\n- CSS3\n- JavaScript\n- Basic understanding of TypeScript/JavaScript\n- Basics of Angular\n\nWhat will learn and cover\n---------------------\n\nWelcome to the new tutorial series on Angular Material. \n\nIn this introductory Angular Material module will have a look and learn:\n- What is Angular Material?\n- How to install and start with Angular Material?\n- How to use Angular Material components to build/design/develop clean and elegant UI?\n- How to work with various Angular Material components like:\n  - Form Controls\n  - Icons\n  - Dialog boxes\n  - Progress bars/spinners \n  - Tooltips\n  - and many more Angular Material components\n- Using In-built/Pre-built theme\n- Creating a custom theme\n- Use/Explore Angular Material typography\n- Create custom typography\n\nTopics included/covered\n=====================\n\n1. [Introduction to Angular Material](#1-introduction-to-angular-material)\n    - 1.1. [What is Material Design](#11-what-is-material-design)\n    - 1.2. [What is Angular Material](#12-what-is-angular-material)\n    - 1.3. [Benefits of Angular Material](#13-benefits-of-angular-material)\n    - 1.4. [Features of Angular Material](#14-features-of-angular-material)\n    - 1.5. [Difference Between Angular Material and Bootstrap](#15-difference-between-angular-material-and-bootstrap) | [Angular Material vs Bootstrap](#15-angular-material-vs-bootstrap)\n    - 1.6. [Various Angular Material Comonents](#16-various-angular-material-comonents)\n\n2. [Getting Started with Angular Material](#2-getting-started-with-angular-material)\n    - 2.1. [Installing Angular Material](#21-installing-angular-material) | [Angular Material Environment Setup](#21-angular-material-environment-setup)\n        - 2.1.1. [Installation-The manual or the long way](#211-installation-the-manual-or-the-long-way)\n        - 2.1.2. [Installation-The short or quick way](#212-installation-the-short-or-quick-way)\n    - 2.2. [Using Angular Material in project Application](#22-using-angular-material-in-project-application)\n    - 2.3. [Creating a separate material module](#23-creating-a-separate-material-module) | [Isolate extract material module](#23-isolate-extract-material-module)\n    - 2.4. [Typography](#24-typography)\n    - 2.5. [Button](#25-button)\n        - 2.5.1. [Disable Ripple Animation Effect](#251-disable-ripple-animation-effect)\n\n1 Introduction to Angular Material\n=====================\n\n1.1. What is Material Design\n---------------------\n\nMaterial Design is a `User Interface design language created by Google in 2014`. It dictates a set of principles and guidelines for creating UIs including motion (animations) and interaction (gestures).\n\n1.2. What is Angular Material\n---------------------\n\n- Angular Material is a UI component library for Angular developers (Material Design components for Angular)\n- Angular Material is the implementation of Material Design for Angular. It offers a set of components and patterns for navigation, forms, buttons, and layouts\n- Angular Material is a library of re-usable and high-quality UI components built with Angular and TypeScript\n- The angular Material library provides us with the component to build awesome user interface/look and feel in quick time\n- It an implementation of Google's Material Design specification and standards (Just like we have UI frameworks for following famous and popular frameworks):\n  - **`ReactJs`** -\u003e MaterialUI\n  - **`VueJs`** -\u003e Vuetify\n  - **`Angular`** -\u003e Angular Material\n\n| **Framework**                     | **UI Component Library**                  |\n| ----------------------------------|-------------------------------------------|\n| **`ReactJs`**                     | MaterialUI                                |\n| **`VueJs`**                       | Vuetify                                   |\n| **`Angular`**                     | Angular Material                          |\n\n\u003e Current major version of Angular and Angular Material is version 7 / 8\n\n1.3. Benefits of Angular Material\n---------------------\nThere are several benefits of using Angular Material components. Angular Material Components are:\n- Internationalized (Worldwide user with different languages can use)\n- Clean and simple API\n- Well testing with Unit and Integration test\n- Easily Customizable\n- Theme based (various themes available)\n- Very fast (minimal performance overhead)\n- Well-documented\n- Community support\n- Constructing attractive, consistent, and functional web pages and web applications \n- Follow/Adhere to modern web design principles like browser portability, device independence, and graceful degradation\n\n1.4. Features of Angular Material \n---------------------\n\n- In-built responsive designing\n- Cross-browser compatibility \n- Can be used to create reusable web components\n- Includes new versions of common UI controls/components such as buttons, checkboxes, and text fields, etc. \n- Adapted to Material Design concepts/principles\n- Includes enhanced/specialized features like cards, toolbar, speed dial, side nav, swipe, and so on\n\n1.5. Difference Between Angular Material and Bootstrap\n---------------------\n1.5. Angular Material vs Bootstrap\n---------------------\nIn an application, one can use UI library/framework as Angular Material or Bootstrap or maybe both together as per needs and requirements\n\n| **Angular Material**              | **Bootstrap**                             |\n| ----------------------------------|-------------------------------------------|\n| New in the market(recently develop and introduced)                            | Old UI layout framework                                                                |\n| Consists of fewer components as compared to Bootstrap                          | Consists of many useful components                                              |\n| Angular Material is specially built for Angular, so it is standard framework/UI library used in all Google applications     | Bootstrap is not specially built for Angular so Bootstrap with Angular has lots of third party dependencies which may break any time |\n| Angular Material components are built with Angular/TypeScript/JavaScript| Bootstrap is built/developed with plain JavaScript and jQuery. `Bootstrap UI` library is developed with Angular, and used especially for Angular Development    | \n| Common API, Ease to use and standard look and feel for various components| It have a different layout and different standards of look and feel |\n| Good to use but not completely stable, as new component development is in progress | Stable |\n\n1.6. Various Angular Material Comonents\n---------------------\n\n\u003e Visit Angular Material library home page: website: https://material.angular.io\n  - Various Angular components available: website: https://material.angular.io/components/categories\n\n1. Install and Add Angular Material to an application\n2. Check Angular Material typography or any other component\n3. **Angular Material comprises a different range of components that implement common interaction patterns according to the Material Design specifications. Here is the list of different Angular Material components and 6 major category:**\n    1. Form Controls\n        - Autocomplete\n        - Check box\n        - Datepcker\n        - Form Field\n        - Input\n        - Radio button  \n        - Select\n        - Slider\n        - Slide toggle\n    2. Navigation\n        - Menu\n        - Sidenav\n        - Toolbar\n    3. Layout\n        - Card\n        - Grid list\n        - List\n        - Tabs\n        - Tree\n    4. Buttons \u0026 Indicators\n        - Button\n        - Icon\n        - Progress bar/spinner\n    5. Popups \u0026 Modals\n        - Dialog\n        - Tooltip\n    6. Data table\n        - Paginator\n        - Table\n\n- Have a look at some of the examples given for/with each component and try to follow it\n\n2 Getting Started with Angular Material\n=====================\n\n2.1. Installing Angular Material\n---------------------\n2.1. Angular Material Environment Setup\n---------------------\n\nTo install Angular and Angular Material, we require the following:\n\n- Nodejs\n- Npm\n- Angular CLI\n- Visual Code Editor, or an IDE for writing your code\n\n\u003chr/\u003e\n\n\u003e Its advisable to follow and keep open updated Angular Material guide/help document while implementing any component in an application: \n  - https://material.angular.io/guide\n  - https://material.angular.io/guide/getting-started\n\n\u003chr/\u003e\n\n\u003e First Check Node/NPM, Angular CLI installed version by using the following command: \n```\nng -v \n\nor \n\nng --version\n\n```\n\n\u003chr/\u003e\n\n\u003e In this tutorial, we'll see how to add Material Design to Angular project/application  in two different ways: ( There are a different set of Material installation processes for Angular/Angular CLI 4+ versions and Angular 6+)\n\n  1. `The manual or the long way`: Install and add all dependencies by following a bunch of steps manually. This works for Angular 4+ versions\n\n  2. `The short or quick way`: By using the `ng add` command to easily/quickly add Angular Material in one step using Angular Schematics. This method only works with Angular 6+ versions\n\n\u003e Its good to have and use Angular CLI version 7 and above installed on your machine (so if Angular CLI version 6 or lower available, please upgrade to Angular CLI version 7)\n\n2.1.1. Installation-The manual or the long way\n---------------------\n\n- **`Step 1`**: Install all `dependencies`\n- **`Step 2`**: Include an angular material `theme` in current application `styles.css`\n- **`Step 3`**: Provide `animation support` if any, by importing `BrowserAnimationsModule` or `NoopAnimationsModule` in `app.module.ts`\n- **`Step 4`**: Verify installation of Angular Material, by `using some Material components` in HTML page of an application\n- **`Step 5`**: `Run/Serve the application` to get the final output\n\n\u003chr/\u003e\n\n\u003e **`Step 1`**: Install all dependencies\n\n1. Create a new project with `angular cli` command-line utility\n    ```\n      ng new demo-material\n    ```\n2. Change directory to explore inside\n    ```\n    cd demo-material\n    ```\n3. install the `Component Dev Kit (CDK)`\n    ```\n    npm i --save @angular/cdk\n    ```\n\n    - `Component Dev Kit (CDK)` is one of the most important dependencies for angular material\n    - Its library allows to create and build awesome components for web\n4. install Angular Material\n    ```\n    npm i --save @angular/material\n    ```\n5. install Angular Animation\n    ```\n    npm i --save @angular/animations\n    ```\n6. install `HammerJS` which provides gesture recognition capabilities (website: hammerjs.github.io)\n    ```\n    npm i --save hammerjs\n    ```\n\n\u003e Single command to install everything ie. above all dependencies at one go: \n    ```\n    npm i --save @angular/cdk @angular/material @angular/animations hammerjs\n    ```\n\n\u003chr/\u003e\n\n\u003e **`Step 2`**: Include/import an angular material theme in current application styles.css\n\n1. styles.css\n    ```css\n    @import \"~@angular/material/prebuilt-themes/indigo-pink.css\";\n    ```\n\n\u003chr/\u003e\n\n\u003e **`Step 3`**: Provide animation support if any, by importing BrowserAnimationsModule in app.module.ts\n1. app.module.ts\n    ```ts\n    import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';\n\n    imports: [\n      BrowserAnimationsModule, NoopAnimationsModule\n    ] \n    ```\n\n\u003chr/\u003e\n\n\u003e **`Step 4`**: Verify installation of Angular Material, by using some components in the application HTML page\n\n1. app.component.html\n    - Delete old markup\n    - add Angular Material checkbox component markup as: \n    ```html\n    \u003c!-- old markup\n        \u003cmd-checkbox\u003eI am Interested\u003c/md-checkbox\u003e \n    --\u003e\n\n    \u003cmat-checkbox\u003eI am Interested\u003c/mat-checkbox\u003e\n    ```\n\n2. app.module.ts\n    ```ts\n    /* old statement\n    import { MdCheckboxModule } from '@angular/material' */\n    \n    import { MatCheckboxModule } from '@angular/material/checkbox';\n    \n    imports: [\n      BrowserAnimationsModule, NoopAnimationsModule,\n      \n      /* old statement\n      MdCheckboxModule */\n\n      MatCheckboxModule\n    ]\n    ```\n\n\u003chr/\u003e\n\n\u003e **`Step 5`**: Run/Serve the application to get final output and load in the browser:\n1. Start the server or Run/Serve the application command: \n    ```\n    ng serve\n    ```\n2. Open browser and type application server path running at: `localhost:4200`\n\n2.1.2. Installation-The short or quick way\n---------------------\n\n1. Create a new angular project/application with the command: \n    ```\n    ng new material-demo\n    ```\n2. Navigate into the newly created project/application folder with the command: \n    ```\n    cd material-demo\n    ```\n3. Install or setup Angular Material with the command: \n    ```\n    ng add @angular/material\n    ``` \n\n    - Provide an appropriate option for `theme` - `Indigo-pink`\n\n    - Setup `HammerJs for gesture` recognition - `Yes`\n\n    - Browser animations - `Yes`\n\n4. Once this simple basic environment setup is done for Angular Material we are ready to use Angular Material in our project/application\n\n\u003e Note: `ng add @angular/material` command include required modules/dependencies, themes and make entries/changes in files like `angular.json, package.json, index.html, main.ts, styles.css, app.module.ts` etc.\n\n2.2. Using Angular Material in project Application\n---------------------\n\nTo use Angular Material in project Application, there are 3 simples steps:\n\n1. `Import` required Angular Material component\n2. Add the imported Angular Material component under `imports` array\n3. Add necessary `HTML tag/markup` related to Angular Material component in HTML markup file/page\n\n\u003chr/\u003e\n\nLet's do it practically:\n\n1. `app.module.ts`: import required Angular Material component module in app.module.ts\n    ```ts\n    /* import { MatButtonModule } from '@angular/material' */\n    import { MatButtonModule } from '@angular/material/button'\n    ```\n2. Add the imported Angular Material component under `imports` array\n    ```ts\n    imports: [ MatButtonModule ]\n    ```\n3. `app.component.html`: Add necessary html tag/markup related to Angular Material component in html markup file/page\n    ```html\n    \u003cbutton mat-button\u003eCheck Me! \u003c/button\u003e\n\n    \u003cbutton mat-raised-button\u003eClick Me! \u003c/button\u003e\n    ```\n4. Run/Serve the angular application with command: \n    ```\n    ng serve -o\n    ```\n5. Load application in browser, type url and check output\n    ```\n    http://localhost:4200\n    ```\n\n\u003chr/\u003e\n\n\u003e **Syntax \u0026 Example**: `package.json`\n\n```json\n{\n  \"name\": \"demo-material\",\n  \"version\": \"1.0.0\",\n  \"scripts\": {\n    \"ng\": \"ng\",\n    \"start\": \"ng serve\",\n    \"build\": \"ng build\",\n    \"test\": \"ng test\",\n    \"lint\": \"ng lint\",\n    \"e2e\": \"ng e2e\"\n  },\n  \"private\": true,\n  \"dependencies\": {\n    \"@angular/animations\": \"~7.2.15\",\n    \"@angular/cdk\": \"^7.3.7\",\n    \"@angular/common\": \"~7.2.15\",\n    \"@angular/compiler\": \"~7.2.15\",\n    \"@angular/core\": \"~7.2.15\",\n    \"@angular/forms\": \"~7.2.15\",\n    \"@angular/http\": \"~7.2.15\",\n    \"@angular/material\": \"~7.3.7\",\n    \"@angular/platform-browser\": \"~7.2.15\",\n    \"@angular/platform-browser-dynamic\": \"~7.2.15\",\n    \"@angular/router\": \"~7.2.15\",\n    \"core-js\": \"^2.5.4\",\n    \"hammerjs\": \"~2.0.8\",\n    \"rxjs\": \"~6.5.2\",\n    \"zone.js\": \"~0.8.29\"\n  },\n  \"devDependencies\": {\n    \"@angular-devkit/build-angular\": \"~0.6.8\",\n    \"@angular/cli\": \"~7.3.9\",\n    \"@angular/compiler-cli\": \"~7.2.15\",\n    \"@angular/language-service\": \"^6.0.3\",\n    \"@types/jasmine\": \"~2.8.6\",\n    \"@types/jasminewd2\": \"~2.0.3\",\n    \"@types/node\": \"~8.9.4\",\n    \"codelyzer\": \"~4.2.1\",\n    \"jasmine-core\": \"~2.99.1\",\n    \"jasmine-spec-reporter\": \"~4.2.1\",\n    \"karma\": \"~1.7.1\",\n    \"karma-chrome-launcher\": \"~2.2.0\",\n    \"karma-coverage-istanbul-reporter\": \"~2.0.0\",\n    \"karma-jasmine\": \"~1.1.1\",\n    \"karma-jasmine-html-reporter\": \"^0.2.2\",\n    \"protractor\": \"~5.3.0\",\n    \"ts-node\": \"~5.0.1\",\n    \"tslint\": \"~5.9.1\",\n    \"typescript\": \"^3.2.4\"\n  }\n}\n```\n\n\u003chr/\u003e\n\n\u003e **Syntax \u0026 Example**: `styles.css`\n\n```css\n@import \"~@angular/material/prebuilt-themes/indigo-pink.css\";\n\nbody {\n  font-family: Roboto,\"Helvetica Neue\",sans-serif;\n}\n```\n\n\u003chr/\u003e\n\n\u003e **Syntax \u0026 Example**: `app.module.ts`\n\n```ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\nimport { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations'\n\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatButtonModule } from '@angular/material/button'\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    BrowserAnimationsModule,\n    NoopAnimationsModule,\n\n    MatCheckboxModule, MatButtonModule\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\n\nexport class AppModule { }\n```\n\n\u003chr/\u003e\n\n\u003e **Syntax \u0026 Example**: `app.component.html`\n\n```html\n\u003cdiv style=\"text-align:center\"\u003e\n  \n  \u003ch1\u003eWelcome to {{ title }}!\u003c/h1\u003e\n\n  \u003cimg width=\"150\" alt=\"Angular Logo\" src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==\"\u003e\n\n\u003c/div\u003e\n\n\u003cdiv\u003e\n\n  \u003ch2\u003eInitial Angular Material Markup for testing: \u003c/h2\u003e\n\n  \u003cmat-checkbox\u003eI am Interested\u003c/mat-checkbox\u003e \u003cbr/\u003e \u003cbr/\u003e\n\n  Simple Button: \u003cbutton mat-button\u003eCheck Me! \u003c/button\u003e \u003cbr/\u003e \u003cbr/\u003e\n\n  Raised Button: \u003cbutton mat-raised-button\u003eClick Me! \u003c/button\u003e \u003cbr/\u003e \u003cbr/\u003e\n\n  \u003chr/\u003e\n\n\u003c/div\u003e\n\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-angular-material/2.2-initial-material-sample-components-test.png\" alt=\"Angular Material installation - initial module/component import - component testing\" title=\"Angular Material installation - initial module/component import - component testing\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.2 - Angular Material installation - initial module/component import - component testing \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.3. Creating a separate material module\n---------------------\n2.3. Isolate extract material module\n---------------------\n\n- It is advisable/better recommended and professional approach to create a separate Angular material module named `angMaterials` which will contain/deal with importing and exporting all required Angular material component modules. \n- Include the `angMaterials` module in `app.module.ts` so that Angular material components code will be isolated as well as it will neat-clean and readable.\n    ```\n    `ng g m angMaterials` \n\n    or \n\n    `ng generate module angMaterials`\n    ```\n- `angMaterials.module.ts` file will consist of only the import and exports related to Angular Material modules. So please remove all import and exports statements related to Angular Material modules from `app.module.ts` and add it into newly created `angMaterials.module.ts`:\n    ```ts\n    /* import { MatButtonModule } from `@angular/material` */\n    import { MatButtonModule } from '@angular/material/button'\n\n    const AngMaterialsCompModule = [\n        MatButtonModule\n    ]\n\n    imports: [ AngMaterialsCompModule ], \n    exports: [ AngMaterialsCompModule ]\n    ```  \n- Every Angular Material component/module used in the application/project should be enter under `const AngMaterialsCompModule` \n- Finally include/import and imports the `AngMaterialsModule` in app module\n- Restart the server and run the application than check in browser\n\n\u003chr/\u003e\n\n\u003e **Syntax \u0026 Example**: `app.module.ts`\n\n```ts\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\n\nimport { AppComponent } from './app.component';\n\nimport { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations'\n\n/* import { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatButtonModule } from '@angular/material/button' */\nimport { AngMaterialsModule } from './ang-materials/ang-materials.module';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    BrowserAnimationsModule,\n    NoopAnimationsModule,\n    /* MatCheckboxModule, MatButtonModule */\n    AngMaterialsModule\n\n  ],\n  providers: [],\n  bootstrap: [ AppComponent ]\n})\n\nexport class AppModule { }\n```\n\n\u003chr/\u003e\n\n\u003e **Syntax \u0026 Example**: `ang-materials.module.ts`\n\n```ts\nimport { NgModule } from '@angular/core';\n\nimport { MatCheckboxModule } from '@angular/material/checkbox';\nimport { MatButtonModule } from '@angular/material/button'\n\nconst AngMaterialsCompModule = [\n  MatButtonModule,\n  MatCheckboxModule\n]\n\n@NgModule({\n  declarations: [],\n  imports: [\n    AngMaterialsCompModule\n  ],\n  exports: [ AngMaterialsCompModule ]\n\n})\n\nexport class AngMaterialsModule { }\n```\n\n\u003chr/\u003e\n\n\u003e **Syntax \u0026 Example**: `app.component.html`\n\n```html\n\u003c!--The content below is only a placeholder and can be replaced.--\u003e\n\u003cdiv style=\"text-align:center\"\u003e\n  \n  \u003ch1\u003eWelcome to {{ title }}!\u003c/h1\u003e\n\n  \u003cimg width=\"150\" alt=\"Angular Logo\" src=\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==\"\u003e\n\n\u003c/div\u003e\n\n\u003cdiv\u003e\n\n  \u003ch2\u003eInitial Angular Material Markup for testing: Isolated Angular material module\u003c/h2\u003e\n\n  \u003cmat-checkbox\u003eI am Interested\u003c/mat-checkbox\u003e \u003cbr/\u003e \u003cbr/\u003e\n\n  Simple Button: \u003cbutton mat-button\u003eCheck Me! \u003c/button\u003e \u003cbr/\u003e \u003cbr/\u003e\n\n  Raised Button: \u003cbutton mat-raised-button\u003eClick Me! \u003c/button\u003e \u003cbr/\u003e \u003cbr/\u003e\n\n  \u003chr/\u003e\n\n\u003c/div\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-angular-material/2.3-isolated-material-module-test.png\" alt=\"Isolated Angular Material - initial module/component import - component testing\" title=\"Isolated Angular Material - initial module/component import - component testing\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.3 - Isolated Angular Material - initial module/component import - component testing \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.4. Typography\n---------------------\n\n- Typography is nothing but managing/systematizing/representing the text in distinct/legible, readable, and appealing way when displayed/used on a page\n- Angular Material's typography is based on the guidelines from the `Google Material Design spec` and is designed/arranged and systematized into different typography levels\n- Typography basically deals with the `styles and appearance` of text on a page\n- Angular Material consists of `set of classes concern with style, size look and appearance of font/text`\n- Angular material provides Typography levels which keeps the font/text size standardised/definite with `font-face/family`, `font-size`, `font-weight` and `line-height`\n- Material Typography classes (`.mat-typography`) mostly starts/prefixed with `mat` keyword. example: `.mat-display-1`, `mat-h1`, `.mat-headline`, `.mat-title`\n- Angular material `mat-display-1` to `mat-display-4` classes helps to set Typography heading levels (total 4 display levels - mainly used only once on a page for large headings)\n- By default, Angular Material doesn't apply any global CSS, the heading tags like `\u003ch1\u003e` to `\u003ch6\u003e` does not get any material styling. To get proper material styles heading tags we must be wrapped inside `.mat-typography` class. `.mat-typography` the class helps to use various HTML tags normally as this class styles all descendant/child native elements\n\n\u003chr/\u003e\n\n1. Create a new angular component with angular/cli command:\n    ```\n    ng generate component typography\n\n    or\n\n    ng g c typography\n    ```\n2. Write required markup inside `typography.component.html` and include this component in `app.component.html` as tag/element selector `\u003ctypography-component\u003e\u003c/typography-component\u003e`\n\n\u003chr/\u003e\n\n\u003e **Syntax \u0026 Example**: `typography.component.html`\n\n```html\n\u003csection\u003e\n\n  \u003csection\u003e\n    \u003cspan\u003e\u003cu\u003e.mat-display-4 to .mat-display-1\u003c/u\u003e\u003c/span\u003e \u003cbr/\u003e \u003cbr/\u003e \n    \u003cheader class=\"mat-display-4\"\u003eHeader 'mat-display-4'\u003c/header\u003e\n    \u003cheader class=\"mat-display-3\"\u003eHeader 'mat-display-3'\u003c/header\u003e\n    \u003cheader class=\"mat-display-2\"\u003eHeader 'mat-display-2'\u003c/header\u003e\n    \u003cheader class=\"mat-display-1\"\u003eHeader 'mat-display-1'\u003c/header\u003e\n  \u003c/section\u003e\n\n  \u003chr style=\"border:1px dashed;\" /\u003e\n\n  \u003csection\u003e\n    \u003cspan\u003e\u003cu\u003e.mat-display-1 to .mat-display-4 \u003c/u\u003e\u003c/span\u003e \u003cbr/\u003e \u003cbr/\u003e\n    \u003cheader class=\"mat-display-1\"\u003eHeader 'mat-display-1'\u003c/header\u003e\n    \u003cheader class=\"mat-display-2\"\u003eHeader 'mat-display-2'\u003c/header\u003e\n    \u003cheader class=\"mat-display-3\"\u003eHeader 'mat-display-3'\u003c/header\u003e\n    \u003cheader class=\"mat-display-4\"\u003eHeader 'mat-display-4'\u003c/header\u003e\n  \u003c/section\u003e\n\n  \u003chr style=\"border:1px dashed;\" /\u003e\n\n  \u003csection\u003e\n    \u003cspan\u003e\u003cu\u003e.mat-h1 to .mat-h4\u003c/u\u003e\u003c/span\u003e \u003cbr/\u003e \u003cbr/\u003e\n    \u003cheader class=\"mat-h1\"\u003eHeader 'mat-h1'\u003c/header\u003e\n    \u003cheader class=\"mat-h2\"\u003eHeader 'mat-h2'\u003c/header\u003e\n    \u003cheader class=\"mat-h3\"\u003eHeader 'mat-h3'\u003c/header\u003e\n    \u003cheader class=\"mat-h4\"\u003eHeader 'mat-h4'\u003c/header\u003e\n  \u003c/section\u003e\n\n  \u003chr style=\"border:1px dashed;\" /\u003e\n\n  \u003csection class=\"mat-typography\"\u003e\n    \u003cspan\u003e\u003cu\u003e.mat-typography -\u003e h1 to h4\u003c/u\u003e\u003c/span\u003e \u003cbr/\u003e \u003cbr/\u003e\n    \u003ch1\u003e'h1 inside mat-typography'\u003c/h1\u003e\n    \u003ch2\u003e'h2 inside mat-typography'\u003c/h2\u003e\n    \u003ch3\u003e'h3 inside mat-typography'\u003c/h3\u003e\n    \u003ch4\u003e'h4 inside mat-typography'\u003c/h4\u003e\n  \u003c/section\u003e\n\n  \u003chr style=\"border:1px dashed;\" /\u003e\n\n  \u003csection\u003e\n    \u003cspan\u003e\u003cu\u003e.mat-headline, .mat-title, .mat-subheading-2\u003c/u\u003e\u003c/span\u003e \u003cbr/\u003e \u003cbr/\u003e\n    \u003cheader class=\"mat-headline\"\u003eHeader 'mat-h1' or 'mat-headline'\u003c/header\u003e\n    \u003cheader class=\"mat-title\"\u003eHeader 'mat-h2' or 'mat-title'\u003c/header\u003e\n    \u003cheader class=\"mat-subheading-2\"\u003eHeader 'mat-h3' or 'mat-subheading-2'\u003c/header\u003e\n    \u003cheader class=\"mat-subheading-1\"\u003eHeader 'mat-h4' or 'mat-subheading-1'\u003c/header\u003e\n  \u003c/section\u003e\n\n  \u003chr style=\"border:1px dashed;\" /\u003e\n\n  \u003csection\u003e\n    \u003cspan\u003e\u003cu\u003e.mat-headline, .mat-title, .mat-subheading-2\u003c/u\u003e\u003c/span\u003e \u003cbr/\u003e \u003cbr/\u003e\n    \u003cheader class=\"mat-body-1\"\u003e'mat-body-1'\u003c/header\u003e\n    \u003cheader class=\"mat-body-2\"\u003e'mat-body-2'\u003c/header\u003e\n    \u003cheader class=\"mat-body-strong\"\u003e'mat-body-strong'\u003c/header\u003e\n    \u003cheader class=\"mat-capton\"\u003e'mat-small', 'mat-capton'\u003c/header\u003e\n  \u003c/section\u003e\n\n\u003c/section\u003e\n```\n\n\u003chr/\u003e\n\n\u003e **Syntax \u0026 Example**: `typography.component.html`\n\n```html\n\u003csection\u003e\n  \u003cspan\u003e\u003cu\u003e.mat-display-4 to .mat-display-1\u003c/u\u003e\u003c/span\u003e \u003cbr/\u003e \u003cbr/\u003e \n  \u003cheader class=\"mat-display-4\"\u003eHeader 'mat-display-4'\u003c/header\u003e\n  \u003cheader class=\"mat-display-3\"\u003eHeader 'mat-display-3'\u003c/header\u003e\n  \u003cheader class=\"mat-display-2\"\u003eHeader 'mat-display-2'\u003c/header\u003e\n  \u003cheader class=\"mat-display-1\"\u003eHeader 'mat-display-1'\u003c/header\u003e\n\u003c/section\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-angular-material/2.4.1-material-typograhy-mat-display.png\" alt=\"Angular Material - mat-display classes\" title=\"Angular Material - mat-display classes\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.4.1 - Angular Material - mat-display classes \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003e **Syntax \u0026 Example**: `typography.component.html`\n\n```html\n\u003csection\u003e\n  \u003cspan\u003e\u003cu\u003e.mat-display-1 to .mat-display-4 \u003c/u\u003e\u003c/span\u003e \u003cbr/\u003e \u003cbr/\u003e\n  \u003cheader class=\"mat-display-1\"\u003eHeader 'mat-display-1'\u003c/header\u003e\n  \u003cheader class=\"mat-display-2\"\u003eHeader 'mat-display-2'\u003c/header\u003e\n  \u003cheader class=\"mat-display-3\"\u003eHeader 'mat-display-3'\u003c/header\u003e\n  \u003cheader class=\"mat-display-4\"\u003eHeader 'mat-display-4'\u003c/header\u003e\n\u003c/section\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-angular-material/2.4.2-material-typograhy-mat-display.png\" alt=\"Angular Material - mat-display classes\" title=\"Angular Material - mat-display classes\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.4.2 - Angular Material - mat-display classes \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003e **Syntax \u0026 Example**: `typography.component.html`\n\n```html\n\u003csection\u003e\n  \u003cspan\u003e\u003cu\u003e.mat-h1 to .mat-h4\u003c/u\u003e\u003c/span\u003e \u003cbr/\u003e \u003cbr/\u003e\n  \u003cheader class=\"mat-h1\"\u003eHeader 'mat-h1'\u003c/header\u003e\n  \u003cheader class=\"mat-h2\"\u003eHeader 'mat-h2'\u003c/header\u003e\n  \u003cheader class=\"mat-h3\"\u003eHeader 'mat-h3'\u003c/header\u003e\n  \u003cheader class=\"mat-h4\"\u003eHeader 'mat-h4'\u003c/header\u003e\n\u003c/section\u003e\n\n\u003chr style=\"border:1px dashed;\" /\u003e\n\n\u003csection class=\"mat-typography\"\u003e\n  \u003cspan\u003e\u003cu\u003e.mat-typography -\u003e h1 to h4\u003c/u\u003e\u003c/span\u003e \u003cbr/\u003e \u003cbr/\u003e\n  \u003ch1\u003e'h1 inside mat-typography'\u003c/h1\u003e\n  \u003ch2\u003e'h2 inside mat-typography'\u003c/h2\u003e\n  \u003ch3\u003e'h3 inside mat-typography'\u003c/h3\u003e\n  \u003ch4\u003e'h4 inside mat-typography'\u003c/h4\u003e\n\u003c/section\u003e\n\n\u003chr style=\"border:1px dashed;\" /\u003e\n\n\u003csection\u003e\n  \u003cspan\u003e\u003cu\u003e.mat-headline, .mat-title, .mat-subheading-2\u003c/u\u003e\u003c/span\u003e \u003cbr/\u003e \u003cbr/\u003e\n  \u003cheader class=\"mat-headline\"\u003eHeader 'mat-h1' or 'mat-headline'\u003c/header\u003e\n  \u003cheader class=\"mat-title\"\u003eHeader 'mat-h2' or 'mat-title'\u003c/header\u003e\n  \u003cheader class=\"mat-subheading-2\"\u003eHeader 'mat-h3' or 'mat-subheading-2'\u003c/header\u003e\n  \u003cheader class=\"mat-subheading-1\"\u003eHeader 'mat-h4' or 'mat-subheading-1'\u003c/header\u003e\n\u003c/section\u003e\n\n\u003chr style=\"border:1px dashed;\" /\u003e\n\n\u003csection\u003e\n  \u003cspan\u003e\u003cu\u003e.mat-headline, .mat-title, .mat-subheading-2\u003c/u\u003e\u003c/span\u003e \u003cbr/\u003e \u003cbr/\u003e\n  \u003cheader class=\"mat-body-1\"\u003e'mat-body-1'\u003c/header\u003e\n  \u003cheader class=\"mat-body-2\"\u003e'mat-body-2'\u003c/header\u003e\n  \u003cheader class=\"mat-body-strong\"\u003e'mat-body-strong'\u003c/header\u003e\n  \u003cheader class=\"mat-capton\"\u003e'mat-small', 'mat-capton'\u003c/header\u003e\n\u003c/section\u003e\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-angular-material/2.4.3-material-typograhy-mat-display-classes.png\" alt=\"Angular Material - mat-h1, mat-typography, mat-headline\" title=\"Angular Material - mat-h1, mat-typography, mat-headline\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.4.3 - Angular Material - mat-h1, mat-typography, mat-headline \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n\u003chr/\u003e\n\n\u003e **`Note`**: \n  - Applying typography related classes to an individual elements is pretty time consuming and tedious, so the best practice/the better and also advisable way is that to apply `mat-typography` class to main parent container/element or at global level (The `.mat-typography` class helps to use various HTML tags normally as this class styles all descendant/child native elements)\n\n\u003e **Syntax \u0026 Example**: `typography.component.html`\n\n```html\n\u003csection class=\"mat-typography\"\u003e\n  \u003ch1\u003eh1 inside mat-typography\u003c/h1\u003e\n  \u003ch2\u003eh2 inside mat-typography\u003c/h2\u003e\n  \u003ch3\u003eh3 inside mat-typography\u003c/h3\u003e\n  \u003ch4\u003eh4 inside mat-typography\u003c/h4\u003e\n  \u003cp\u003ep paragraph inside mat-typography\u003c/p\u003e\n  \u003ccaption\u003ecaption inside mat-typography\u003c/caption\u003e\n\u003c/section\u003e\n```\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-angular-material/2.4.4-material-typography-mat-typography-global-level.png\" alt=\"Angular Material - Apply .mat-typography class at global/parent level\" title=\"Angular Material - Apply .mat-typography class at global/parent level\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.4.4 - Angular Material - Apply .mat-typography class at global/parent level \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n2.5. Button\n---------------------\n\n- Angular Material buttons are native `\u003cbutton\u003e` and/or `\u003ca\u003e` tags/elements enhanced with Material Design styling and ink ripples\n- `'mat-button'` attribute is used with `\u003cbutton\u003e` and/or `\u003ca\u003e` tags/elements to get look and feel of Angular Material button\n\n\u003e **Syntax \u0026 Example**: `app.component.html`\n\n```html\n\u003cbuttons-component\u003e\u003c/buttons-component\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `buttons.component.html`\n\n```html\n\u003csection class=\"mat-typography\"\u003e\n  \n  \u003ch2\u003eBasic Buttons\u003c/h2\u003e\n  \u003cbutton mat-button\u003eBasic Button\u003c/button\u003e\n  \u003cbutton mat-button color=\"primary\"\u003eBasic Button - Color Primary\u003c/button\u003e\n  \u003cbutton mat-button color=\"accent\"\u003eBasic Button - Color Accent\u003c/button\u003e\n  \u003cbutton mat-button disabled\u003eBasic Button - Disabled\u003c/button\u003e\n  \u003ca mat-button\u003ea link button\u003c/a\u003e\n\n  \u003ch2\u003eBasic a href button\u003c/h2\u003e\n  \u003ca mat-button\u003ea link button\u003c/a\u003e\n  \u003ca mat-button color=\"primary\"\u003eBasic Link Button - Color Primary\u003c/a\u003e\n  \u003ca mat-button color=\"accent\"\u003eBasic Link Button - Color Accent\u003c/a\u003e\n  \u003ca mat-button disabled\u003eBasic Link Button - Disabled\u003c/a\u003e\n\n  \u003ch2\u003eRaised Buttons\u003c/h2\u003e\n  \u003cbutton mat-raised-button\u003eBasic Raised Button\u003c/button\u003e\n  \u003cbutton mat-raised-button color=\"primary\"\u003eRaised Button - Color Primary\u003c/button\u003e\n  \u003cbutton mat-raised-button color=\"accent\"\u003eRaised Button - Color Accent\u003c/button\u003e\n  \u003cbutton mat-raised-button disabled\u003eRaised Button - Disabled\u003c/button\u003e\n\n  \u003ch2\u003eStroked Buttons\u003c/h2\u003e\n  \u003cbutton mat-stroked-button\u003eBasic Stroked Button\u003c/button\u003e\n  \u003cbutton mat-stroked-button color=\"primary\"\u003eStroked Button - Color Primary\u003c/button\u003e\n  \u003cbutton mat-stroked-button color=\"accent\"\u003eStroked Button - Color Accent\u003c/button\u003e\n  \u003cbutton mat-stroked-button disabled\u003eStroked Button - Disabled\u003c/button\u003e\n\n  \u003ch2\u003eFlat Buttons (Without Shadow)\u003c/h2\u003e\n  \u003cbutton mat-flat-button\u003eBasic Flat Button\u003c/button\u003e\n  \u003cbutton mat-flat-button color=\"primary\"\u003eFlat Button - Color Primary\u003c/button\u003e\n  \u003cbutton mat-flat-button color=\"accent\"\u003eFlat Button - Color Accent\u003c/button\u003e\n  \u003cbutton mat-flat-button disabled\u003eFlat Button - Disabled\u003c/button\u003e\n\n  \u003ch2\u003eFab Buttons (Circuler button)\u003c/h2\u003e\n  \u003cbutton mat-fab\u003eFab\u003c/button\u003e\n  \u003cbutton mat-fab color=\"primary\"\u003ePrimary\u003c/button\u003e\n  \u003cbutton mat-fab color=\"accent\"\u003eAccent\u003c/button\u003e\n  \u003cbutton mat-fab disabled\u003eDisabled\u003c/button\u003e\n\n  \u003ch2\u003eMini Fab Buttons (Small Circuler button)\u003c/h2\u003e\n  \u003cbutton mat-mini-fab\u003eFab\u003c/button\u003e\n  \u003cbutton mat-mini-fab color=\"primary\"\u003ePrimary\u003c/button\u003e\n  \u003cbutton mat-mini-fab color=\"accent\"\u003eAccent\u003c/button\u003e\n  \u003cbutton mat-mini-fab disabled\u003eDisabled\u003c/button\u003e\n\n  \u003ch2\u003eIcon Buttons\u003c/h2\u003e\n  \u003cbutton mat-icon-button\u003eIcon\u003c/button\u003e\n  \u003cbutton mat-icon-button color=\"primary\"\u003ePrimary\u003c/button\u003e\n  \u003cbutton mat-icon-button color=\"accent\"\u003eAccent\u003c/button\u003e\n  \u003cbutton mat-icon-button disabled\u003eDisabled\u003c/button\u003e\n\n\u003c/section\u003e\n```\n\n\u003e **Syntax \u0026 Example**: `styles.css`\n\n```css\nsection.mat-typography button {\n  margin-right: 2em;\n}\n```\n\n\u003cp\u003e\n  \u003cfigure\u003e\n    \u0026nbsp;\u0026nbsp;\u0026nbsp; \u003cimg src=\"_images-angular-material/2.5.1-material-buttons.png\" alt=\"Angular Material Buttons\" title=\"Angular Material Buttons\" width=\"1000\" border=\"2\" /\u003e\n    \u003cfigcaption\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp; Image 2.5.1 - Angular Material Buttons \u003c/figcaption\u003e\n  \u003c/figure\u003e\n\u003c/p\u003e\n\n### **2.5.1. Disable Ripple Animation Effect**\n\n- `disableRipple` attribute is used to Disable Ripple Animation Effect of Angular Material Button\n\n\u003e **Syntax \u0026 Example**: `buttons.component.html`\n\n```html\n\u003cbutton mat-button disableRipple\u003eBasic Button - Disabled\u003c/button\u003e\n\n\u003cbutton mat-icon-button disableRipple\u003eDisable Ripple\u003c/button\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fangular-material-getting-started-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdinanathsj29%2Fangular-material-getting-started-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdinanathsj29%2Fangular-material-getting-started-tutorial/lists"}