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.
Angular Material for Angular 6,Angular Material for Angular,Angular Material for beginners Angular Material for Angular 6,Angular Material for Angular,Angular Material for beginners Reviewed by interfacecreator on 9:47:00 PM Rating: 5

No comments:

Post Bottom Ad

Powered by Blogger.