How to install Angular Material & How to create side navigation using it?

Angular Material is used for UI for Angular. In Angular Material Created lots of component that we can use in our app create good layout. For install Angular Material First you need to run Following command for installing Angular Material & cdk of it.


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



After Run above command we need to install animation library in Angular For that run following command


npm install --save @angular/animations

After run above command we need to check polyfill because not all animation work with all browser so we need to active polyfills ts file. ” import ‘web-animations-js’; // Run `npm install –save web-animations-js`.” You need to run “npm install –save web-animations-js” command to run animation in all browser.
Now we need to add animation class in our application for that we need to add following code in our app.module.ts


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

@NgModule({
  ...
  imports: [
             ............
             BrowserAnimationsModule,
           ],
  ...
})
export class AppModule { }

Now we need to import Component in app that which we want to use. Let’s we need to here MatSidenavModule for sliding menu. In app.module.ts file we need to import below statement


........
import {MatSidenavModule} from '@angular/material/sidenav';
@NgModule({
  ...
  imports: [
             ............
             MatSidenavModule,
             BrowserAnimationsModule,
           ],
  ...
})

Now we need to add Default material css in our code for that we need to import default Material CSS like below syntax


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



Last step we need to add hammerjs for running sliding,toggle properly for that we need to install that JS and then import in our main.ts for available for full application.


npm install --save hammerjs

then open main.ts file & add below code
import 'hammerjs';

Lets create Menu component in that we need to add following code for display menu


<mat-sidenav-container class="example-container">
<mat-sidenav #sidenav position="start">
This is my content.

</mat-sidenav>
<mat-sidenav-content>
<p><button mat-button (click)="sidenav.toggle()">Toggle</button></p>
</mat-sidenav-content>
</mat-sidenav-container>

Adding above code and run the code it will display toggle button on your screen . when you click it will scroll from left default position is left to right if you wan to change from right to left then we need to change position value to “end” for transition right to left.

Spread the love
  • 25
  •  
  •  
  •  
  •  
  •  
  •  
  •