Angular Material for Angular 6,Angular Material for Angular,Angular Material for beginners

Angular with Material Design

Creating Angular 6 Project  With Material Design by using below steps 

To create  Angular 6 project refer angular 6 tutorial for beginners step by step and open it from Visual Studio Code. and go with below steps, 

Step 1: Open an Integrated terminal and execute below command

npm install --save @angular/material @angular/cdk @angular/animations

Step 2:  Open app.module.ts file and it exists in folder src => app and add Browser Animations Module, Mat Button Module.

Step 3: import  Browser Animations Module into your  project for animation support

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...

Step 3: Add Angular material prebuild theme globally in styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Step 4: To add Material Button  import MatButtonModule from '@angular/material'

import {MatButtonModule} from '@angular/material/button';

Step 5:  Add Material Button in HTML Template

<button mat-button>Material Button</button>

Step 6: And serve it using " ng serve --open " in terminal

Source: @stackblitz

Your browser does not support iframes.