Add Material Design to Angular using Angular CLI

Implementation of Angular Material in Angular 6 project using Angular CLI is never been easier. All you have to do is type this in your terminal:

                    ng add @angular/material
                  

and this will install angular material, import it in module, import material icon font and roboto text in index.html and it will also set up the default theme in angular.json file. 
Pretty crazy! 
And very fooking useful.

But to make it work there is one more thing you have to do. You have to unlock the components.
Go to app.module.ts and import the module for component you are going to use. So for example if you want to use a button you have to import this:

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

                  

and you have to add to imports array so you can use it:

                     imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
                  

And then you can just use it in component.html

                    <button mat-raised-button color="primary">Click me</button
                  

But there is even easer way, to import the material component.In this case we are going to ad material navigation. Open up terminal and type this:

                    ng generate @angular/material:material-nav  --name=main-nav
                  

This will generate main-nav component which you can just use in app.component.html and place this code:

                    <main-nav></main-nav>
                  

So, using

                    ng generate @angular/material:
                  

you can add material components. 

For more info visit this link:
https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4