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.

No comments

Post Top Ad

Post Bottom Ad