How to add angular material into our angular 10 application?

Hello to all, welcome again on therichpost.com, Today in this post, I will tell you, How to add angular material into our angular 10 application?

Post Working:

Friends in this post, I am just giving you brief information to install angular material into our angular 10. For live working example, you can check above video. For demo, now I am just adding angular material mat-slider.

Angular 10 came and if you are new then you must check below two links:

1. Angular10 for beginners
2. Angular10 Basic Tutorials

Here is the code snippet and please follow carefully:

1. Firstly, we need angular 10 fresh setup and for that we need to run below commands inside our terminal and also we should have latest node version installed on our system:

npm install -g @angular/cli

ng new angularmaterial

cd angularmaterial

ng serve

//Here is the url, you need to run into your browser and see working angular test project
http://localhost:4200/

2. Now we need to run below commands into our terminal to get angular material modules into our angular 10 application:

ng add @angular/material

3. Now we need to add below code into our project src/app/app.module.ts file to import angular material module:

...

import {MatSliderModule} from'@angular/material/slider';

...

 imports: [
   ...
    MatSliderModule
  ],

3. Finally we need to add below code into our src/app/app.component.html file to get final out on browser:

<mat-slider min="1" max="100" step="1" value="1"></mat-slider>

4. Don’f forget to run below command in the end:

ng serve

Now we are done guys. if you have any kind of query or suggestion or requirement then feel free to comment below.

Friends, this is just brief intro for material angular. In future I will come with more posts related to material angular. Also please share views on this post if you like it or not because with your views I will make posts more better in future.

Jassa

Thanks