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.
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.
Topics (separate with spaces):
Add topics to categorize your repository and make it more discoverable.
This tutorial explains the fundamental concepts of Angular Material.
Hi All, I’m Dinanath Jayaswal, Senior UI/Web Developer and Adobe Certified Expert Professional, I wanna welcome you to Angular Material Getting started tutorial.
This Course/Tutorial is ideal for:
Welcome to the new tutorial series on Angular Material.
In this introductory Angular Material module will have a look and learn:
Material 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).
ReactJs -> MaterialUIVueJs -> VuetifyAngular -> Angular Material| Framework | UI Component Library |
|---|---|
ReactJs |
MaterialUI |
VueJs |
Vuetify |
Angular |
Angular Material |
Current major version of Angular and Angular Material is version 7 / 8
There are several benefits of using Angular Material components. Angular Material Components are:
In an application, one can use UI library/framework as Angular Material or Bootstrap or maybe both together as per needs and requirements
| Angular Material | Bootstrap |
|---|---|
| New in the market(recently develop and introduced) | Old UI layout framework |
| Consists of fewer components as compared to Bootstrap | Consists of many useful components |
| 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 |
| 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 |
| 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 |
| Good to use but not completely stable, as new component development is in progress | Stable |
Visit Angular Material library home page: website: https://material.angular.io
- Various Angular components available: website: https://material.angular.io/components/categories
To install Angular and Angular Material, we require the following:
Its advisable to follow and keep open updated Angular Material guide/help document while implementing any component in an application:
First Check Node/NPM, Angular CLI installed version by using the following command:
```
ng -v
or
ng —version
<hr/>> 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+)1. `The manual or the long way`: Install and add all dependencies by following a bunch of steps manually. This works for Angular 4+ versions2. `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> 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)2.1.1. Installation-The manual or the long way---------------------- **`Step 1`**: Install all `dependencies`- **`Step 2`**: Include an angular material `theme` in current application `styles.css`- **`Step 3`**: Provide `animation support` if any, by importing `BrowserAnimationsModule` or `NoopAnimationsModule` in `app.module.ts`- **`Step 4`**: Verify installation of Angular Material, by `using some Material components` in HTML page of an application- **`Step 5`**: `Run/Serve the application` to get the final output<hr/>> **`Step 1`**: Install all dependencies1. Create a new project with `angular cli` command-line utility
ng new demo-material```
cd demo-material
install the Component Dev Kit (CDK)
npm i --save @angular/cdk
Component Dev Kit (CDK) is one of the most important dependencies for angular material
npm i --save @angular/material
npm i --save @angular/animations
HammerJS which provides gesture recognition capabilities (website: hammerjs.github.io)
npm i --save hammerjs
Single command to install everything ie. above all dependencies at one go:
```npm i --save @angular/cdk @angular/material @angular/animations hammerjs```
Step 2: Include/import an angular material theme in current application styles.css
Step 3: Provide animation support if any, by importing BrowserAnimationsModule in app.module.ts
- app.module.ts
```ts
import { BrowserAnimationsModule, NoopAnimationsModule } from ‘@angular/platform-browser/animations’;
imports: [BrowserAnimationsModule, NoopAnimationsModule]```
Step 4: Verify installation of Angular Material, by using some components in the application HTML page
app.component.html
add Angular Material checkbox component markup as:
<!-- old markup<md-checkbox>I am Interested</md-checkbox>--><mat-checkbox>I am Interested</mat-checkbox>
app.module.ts
Step 5: Run/Serve the application to get final output and load in the browser:
- Start the server or Run/Serve the application command:
ng serve- Open browser and type application server path running at:
localhost:4200
ng new material-demo
cd material-demo
Install or setup Angular Material with the command:
ng add @angular/material
Provide an appropriate option for theme - Indigo-pink
Setup HammerJs for gesture recognition - Yes
Browser animations - Yes
Once this simple basic environment setup is done for Angular Material we are ready to use Angular Material in our project/application
Note:
ng add @angular/materialcommand include required modules/dependencies, themes and make entries/changes in files likeangular.json, package.json, index.html, main.ts, styles.css, app.module.tsetc.
To use Angular Material in project Application, there are 3 simples steps:
Import required Angular Material componentimports arrayHTML tag/markup related to Angular Material component in HTML markup file/pageLet’s do it practically:
app.module.ts: import required Angular Material component module in app.module.tsimports array
imports: [ MatButtonModule ]
app.component.html: Add necessary html tag/markup related to Angular Material component in html markup file/page
<button mat-button>Check Me! </button><button mat-raised-button>Click Me! </button>
ng serve -o
http://localhost:4200
Syntax & Example:
package.json
{"name": "demo-material","version": "1.0.0","scripts": {"ng": "ng","start": "ng serve","build": "ng build","test": "ng test","lint": "ng lint","e2e": "ng e2e"},"private": true,"dependencies": {"@angular/animations": "~7.2.15","@angular/cdk": "^7.3.7","@angular/common": "~7.2.15","@angular/compiler": "~7.2.15","@angular/core": "~7.2.15","@angular/forms": "~7.2.15","@angular/http": "~7.2.15","@angular/material": "~7.3.7","@angular/platform-browser": "~7.2.15","@angular/platform-browser-dynamic": "~7.2.15","@angular/router": "~7.2.15","core-js": "^2.5.4","hammerjs": "~2.0.8","rxjs": "~6.5.2","zone.js": "~0.8.29"},"devDependencies": {"@angular-devkit/build-angular": "~0.6.8","@angular/cli": "~7.3.9","@angular/compiler-cli": "~7.2.15","@angular/language-service": "^6.0.3","@types/jasmine": "~2.8.6","@types/jasminewd2": "~2.0.3","@types/node": "~8.9.4","codelyzer": "~4.2.1","jasmine-core": "~2.99.1","jasmine-spec-reporter": "~4.2.1","karma": "~1.7.1","karma-chrome-launcher": "~2.2.0","karma-coverage-istanbul-reporter": "~2.0.0","karma-jasmine": "~1.1.1","karma-jasmine-html-reporter": "^0.2.2","protractor": "~5.3.0","ts-node": "~5.0.1","tslint": "~5.9.1","typescript": "^3.2.4"}}
Syntax & Example:
styles.css
@import "~@angular/material/prebuilt-themes/indigo-pink.css";body {font-family: Roboto,"Helvetica Neue",sans-serif;}
Syntax & Example:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations'import { MatCheckboxModule } from '@angular/material/checkbox';import { MatButtonModule } from '@angular/material/button'@NgModule({declarations: [AppComponent],imports: [BrowserModule,BrowserAnimationsModule,NoopAnimationsModule,MatCheckboxModule, MatButtonModule],providers: [],bootstrap: [AppComponent]})export class AppModule { }
Syntax & Example:
app.component.html
<div style="text-align:center"><h1>Welcome to {{ title }}!</h1><img width="150" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="></div><div><h2>Initial Angular Material Markup for testing: </h2><mat-checkbox>I am Interested</mat-checkbox> <br/> <br/>Simple Button: <button mat-button>Check Me! </button> <br/> <br/>Raised Button: <button mat-raised-button>Click Me! </button> <br/> <br/><hr/></div>
angMaterials which will contain/deal with importing and exporting all required Angular material component modules. 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.
`ng g m angMaterials`or`ng generate module angMaterials`
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:
const AngMaterialsCompModule AngMaterialsModule in app moduleSyntax & Example:
app.module.ts
import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './app.component';import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations'/* import { MatCheckboxModule } from '@angular/material/checkbox';import { MatButtonModule } from '@angular/material/button' */import { AngMaterialsModule } from './ang-materials/ang-materials.module';@NgModule({declarations: [AppComponent],imports: [BrowserModule,BrowserAnimationsModule,NoopAnimationsModule,/* MatCheckboxModule, MatButtonModule */AngMaterialsModule],providers: [],bootstrap: [ AppComponent ]})export class AppModule { }
Syntax & Example:
ang-materials.module.ts
import { NgModule } from '@angular/core';import { MatCheckboxModule } from '@angular/material/checkbox';import { MatButtonModule } from '@angular/material/button'const AngMaterialsCompModule = [MatButtonModule,MatCheckboxModule]@NgModule({declarations: [],imports: [AngMaterialsCompModule],exports: [ AngMaterialsCompModule ]})export class AngMaterialsModule { }
Syntax & Example:
app.component.html
<!--The content below is only a placeholder and can be replaced.--><div style="text-align:center"><h1>Welcome to {{ title }}!</h1><img width="150" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="></div><div><h2>Initial Angular Material Markup for testing: Isolated Angular material module</h2><mat-checkbox>I am Interested</mat-checkbox> <br/> <br/>Simple Button: <button mat-button>Check Me! </button> <br/> <br/>Raised Button: <button mat-raised-button>Click Me! </button> <br/> <br/><hr/></div>
Google Material Design spec and is designed/arranged and systematized into different typography levelsstyles and appearance of text on a pageset of classes concern with style, size look and appearance of font/textfont-face/family, font-size, font-weight and line-height.mat-typography) mostly starts/prefixed with mat keyword. example: .mat-display-1, mat-h1, .mat-headline, .mat-titlemat-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)<h1> to <h6> 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 elementsCreate a new angular component with angular/cli command:
ng generate component typographyorng g c typography
typography.component.html and include this component in app.component.html as tag/element selector <typography-component></typography-component>Syntax & Example:
typography.component.html
<section><section><span><u>.mat-display-4 to .mat-display-1</u></span> <br/> <br/><header class="mat-display-4">Header 'mat-display-4'</header><header class="mat-display-3">Header 'mat-display-3'</header><header class="mat-display-2">Header 'mat-display-2'</header><header class="mat-display-1">Header 'mat-display-1'</header></section><hr style="border:1px dashed;" /><section><span><u>.mat-display-1 to .mat-display-4 </u></span> <br/> <br/><header class="mat-display-1">Header 'mat-display-1'</header><header class="mat-display-2">Header 'mat-display-2'</header><header class="mat-display-3">Header 'mat-display-3'</header><header class="mat-display-4">Header 'mat-display-4'</header></section><hr style="border:1px dashed;" /><section><span><u>.mat-h1 to .mat-h4</u></span> <br/> <br/><header class="mat-h1">Header 'mat-h1'</header><header class="mat-h2">Header 'mat-h2'</header><header class="mat-h3">Header 'mat-h3'</header><header class="mat-h4">Header 'mat-h4'</header></section><hr style="border:1px dashed;" /><section class="mat-typography"><span><u>.mat-typography -> h1 to h4</u></span> <br/> <br/><h1>'h1 inside mat-typography'</h1><h2>'h2 inside mat-typography'</h2><h3>'h3 inside mat-typography'</h3><h4>'h4 inside mat-typography'</h4></section><hr style="border:1px dashed;" /><section><span><u>.mat-headline, .mat-title, .mat-subheading-2</u></span> <br/> <br/><header class="mat-headline">Header 'mat-h1' or 'mat-headline'</header><header class="mat-title">Header 'mat-h2' or 'mat-title'</header><header class="mat-subheading-2">Header 'mat-h3' or 'mat-subheading-2'</header><header class="mat-subheading-1">Header 'mat-h4' or 'mat-subheading-1'</header></section><hr style="border:1px dashed;" /><section><span><u>.mat-headline, .mat-title, .mat-subheading-2</u></span> <br/> <br/><header class="mat-body-1">'mat-body-1'</header><header class="mat-body-2">'mat-body-2'</header><header class="mat-body-strong">'mat-body-strong'</header><header class="mat-capton">'mat-small', 'mat-capton'</header></section></section>
Syntax & Example:
typography.component.html
<section><span><u>.mat-display-4 to .mat-display-1</u></span> <br/> <br/><header class="mat-display-4">Header 'mat-display-4'</header><header class="mat-display-3">Header 'mat-display-3'</header><header class="mat-display-2">Header 'mat-display-2'</header><header class="mat-display-1">Header 'mat-display-1'</header></section>
Syntax & Example:
typography.component.html
<section><span><u>.mat-display-1 to .mat-display-4 </u></span> <br/> <br/><header class="mat-display-1">Header 'mat-display-1'</header><header class="mat-display-2">Header 'mat-display-2'</header><header class="mat-display-3">Header 'mat-display-3'</header><header class="mat-display-4">Header 'mat-display-4'</header></section>
Syntax & Example:
typography.component.html
<section><span><u>.mat-h1 to .mat-h4</u></span> <br/> <br/><header class="mat-h1">Header 'mat-h1'</header><header class="mat-h2">Header 'mat-h2'</header><header class="mat-h3">Header 'mat-h3'</header><header class="mat-h4">Header 'mat-h4'</header></section><hr style="border:1px dashed;" /><section class="mat-typography"><span><u>.mat-typography -> h1 to h4</u></span> <br/> <br/><h1>'h1 inside mat-typography'</h1><h2>'h2 inside mat-typography'</h2><h3>'h3 inside mat-typography'</h3><h4>'h4 inside mat-typography'</h4></section><hr style="border:1px dashed;" /><section><span><u>.mat-headline, .mat-title, .mat-subheading-2</u></span> <br/> <br/><header class="mat-headline">Header 'mat-h1' or 'mat-headline'</header><header class="mat-title">Header 'mat-h2' or 'mat-title'</header><header class="mat-subheading-2">Header 'mat-h3' or 'mat-subheading-2'</header><header class="mat-subheading-1">Header 'mat-h4' or 'mat-subheading-1'</header></section><hr style="border:1px dashed;" /><section><span><u>.mat-headline, .mat-title, .mat-subheading-2</u></span> <br/> <br/><header class="mat-body-1">'mat-body-1'</header><header class="mat-body-2">'mat-body-2'</header><header class="mat-body-strong">'mat-body-strong'</header><header class="mat-capton">'mat-small', 'mat-capton'</header></section>
Note:
- 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-typographyclass to main parent container/element or at global level (The.mat-typographyclass helps to use various HTML tags normally as this class styles all descendant/child native elements)Syntax & Example:
typography.component.html
<section class="mat-typography"><h1>h1 inside mat-typography</h1><h2>h2 inside mat-typography</h2><h3>h3 inside mat-typography</h3><h4>h4 inside mat-typography</h4><p>p paragraph inside mat-typography</p><caption>caption inside mat-typography</caption></section>
<button> and/or <a> tags/elements enhanced with Material Design styling and ink ripples'mat-button' attribute is used with <button> and/or <a> tags/elements to get look and feel of Angular Material buttonSyntax & Example:
app.component.html
<buttons-component></buttons-component>
Syntax & Example:
buttons.component.html
<section class="mat-typography"><h2>Basic Buttons</h2><button mat-button>Basic Button</button><button mat-button color="primary">Basic Button - Color Primary</button><button mat-button color="accent">Basic Button - Color Accent</button><button mat-button disabled>Basic Button - Disabled</button><a mat-button>a link button</a><h2>Basic a href button</h2><a mat-button>a link button</a><a mat-button color="primary">Basic Link Button - Color Primary</a><a mat-button color="accent">Basic Link Button - Color Accent</a><a mat-button disabled>Basic Link Button - Disabled</a><h2>Raised Buttons</h2><button mat-raised-button>Basic Raised Button</button><button mat-raised-button color="primary">Raised Button - Color Primary</button><button mat-raised-button color="accent">Raised Button - Color Accent</button><button mat-raised-button disabled>Raised Button - Disabled</button><h2>Stroked Buttons</h2><button mat-stroked-button>Basic Stroked Button</button><button mat-stroked-button color="primary">Stroked Button - Color Primary</button><button mat-stroked-button color="accent">Stroked Button - Color Accent</button><button mat-stroked-button disabled>Stroked Button - Disabled</button><h2>Flat Buttons (Without Shadow)</h2><button mat-flat-button>Basic Flat Button</button><button mat-flat-button color="primary">Flat Button - Color Primary</button><button mat-flat-button color="accent">Flat Button - Color Accent</button><button mat-flat-button disabled>Flat Button - Disabled</button><h2>Fab Buttons (Circuler button)</h2><button mat-fab>Fab</button><button mat-fab color="primary">Primary</button><button mat-fab color="accent">Accent</button><button mat-fab disabled>Disabled</button><h2>Mini Fab Buttons (Small Circuler button)</h2><button mat-mini-fab>Fab</button><button mat-mini-fab color="primary">Primary</button><button mat-mini-fab color="accent">Accent</button><button mat-mini-fab disabled>Disabled</button><h2>Icon Buttons</h2><button mat-icon-button>Icon</button><button mat-icon-button color="primary">Primary</button><button mat-icon-button color="accent">Accent</button><button mat-icon-button disabled>Disabled</button></section>
Syntax & Example:
styles.css
section.mat-typography button {margin-right: 2em;}
disableRipple attribute is used to Disable Ripple Animation Effect of Angular Material ButtonSyntax & Example:
buttons.component.html
<button mat-button disableRipple>Basic Button - Disabled</button><button mat-icon-button disableRipple>Disable Ripple</button>