Angular – How to add Angular Material in a project

By | 12/02/2020

In this post, we will see how to add Angular Material in an Angular project.

We open Visual Studio Code and we create a new project called MaterialProject, using the command
ng new MaterialProject

Then, we create three components called HomePage, Page1 and Page2, using the commands
ng g c HomePage
ng g c Page1
ng g c Page2

Finally, we install Angular Material, using the command
ng add @angular/material

Now, we open the project and first of all, we add the three components in the Routing:


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';
import { HomePageComponent } from './home-page/home-page.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'homepage'},
  { path: 'homepage', component: HomePageComponent },
  { path: 'page1', component: Page1Component },
  { path: 'page2', component: Page2Component },
  { path: '**', pathMatch: 'full', redirectTo: 'homepage' }  

  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
export class AppRoutingModule { }

Then, we insert a simple menu:


 Angular Material 
<button  routerLink="/">Home</button>  
<button  routerLink="/page1">Page1</button>
<button  routerLink="/page2">Page2</button>

If we run the application, using the command ng serve, this will be the result:

Everything works fine and now, with a few steps, we will add Angular Material in the project.
First of all, we modify the file app.module:


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomePageComponent } from './home-page/home-page.component';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatIconModule } from '@angular/material/icon';
import { MatCardModule } from '@angular/material/card';
import { MatButtonModule } from '@angular/material/button';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

and finally, we modify the menu created before:


<mat-toolbar color="primary">  
  Angular Material 
  <button mat-button routerLink="/">Home</button>  
  <button mat-button routerLink="/page1">Page1</button>
  <button mat-button routerLink="/page2">Page2</button>

We have done and, if we refresh the application, this will be the result:

28 thoughts on “Angular – How to add Angular Material in a project

  1. fireball

    Everything is very open with a clear description of the issues. It was truly informative.

  2. Anonymous

    I couldn’t refrain from commenting. Exceptionally well written! blog articles.

  3. Louie Hurndon

    I absolutely love your website.. Very nice colors & theme. Did you develop this web site yourself? Please reply back as I’m hoping to create my very own site and would love to find out where you got this from or just what the theme is called. Cheers!|

    1. Damiano Abballe Post author

      The theme name is Tusi.

  4. Odell Surratt

    What’s up everyone, it’s my first go to see at this web page, and paragraph is actually fruitful in support of me, keep up posting these posts.|

  5. Jamie Lukesh

    This is really interesting, You’re a very skilled blogger. I have joined your feed and look forward to seeking more of your magnificent post. Also, I’ve shared your website in my social networks!|

  6. Evelin Whitcomb

    Excellent blog here! Also your site rather a lot up fast! What host are you the use of? Can I am getting your affiliate link in your host? I want my web site loaded up as quickly as yours lol|

  7. Ernesto Pritts

    I’ve been surfing on-line greater than three hours as of late, but I never found any fascinating article like yours. It’s pretty price enough for me. In my view, if all webmasters and bloggers made excellent content as you probably did, the net can be much more helpful than ever before.|

  8. Elvis Krieger

    What’s up, after reading this remarkable article i am too delighted to share my knowledge here with friends.|

  9. Valeri Maclaughlin

    Wonderful, what a web site it is! This web site gives helpful information to us, keep it up.|

  10. Lonny Kumro

    Informative article, totally what I wanted to find.|

  11. Lila Youree

    What’s up, all is going fine here and ofcourse every one is sharing information, that’s in fact good, keep up writing.|

  12. Archie Matyas

    Very quickly this web site will be famous amid all blogging people, due to it’s nice content|

  13. Zada Camp

    For the reason that the admin of this website is working, no doubt very quickly it will be famous, due to its feature contents.|

  14. Kory Tarone

    Thanks for every other informative site. The place else may just I get that type of information written in such an ideal way? I’ve a undertaking that I am simply now running on, and I’ve been at the glance out for such information.|

  15. Barbra Kasula

    Your way of explaining all in this post is genuinely good, all be able to simply understand it, Thanks a lot.|

  16. Sally Lajoy

    I like the helpful info you provide in your articles. I’ll bookmark your blog and check again here frequently. I am quite sure I’ll learn a lot of new stuff right here! Good luck for the next!|

  17. Ronny Mcgoogan

    I am not certain the place you are getting your info, but great topic. I needs to spend a while learning more or working out more. Thanks for fantastic information I used to be searching for this information for my mission.|

  18. Eloy Heppell

    Good info. Lucky me I found your site by accident (stumbleupon). I’ve book marked it for later!|

  19. Claudie Carrigan

    Heya i’m for the first time here. I found this board and I find It truly helpful & it helped me out a lot. I hope to provide something again and help others such as you aided me.|

  20. Dessie Kornbau

    My partner and I stumbled over here coming from a different web address and thought I may as well check things out. I like what I see so now i am following you. Look forward to looking at your web page yet again.|

  21. Holly Basquez

    Wow that was unusual. I just wrote an incredibly long comment but after I clicked submit my comment didn’t appear. Grrrr… well I’m not writing all that over again. Anyways, just wanted to say excellent blog!|

  22. Alvin Montori

    Pretty section of content. I just stumbled upon your website and in accession capital to assert that I acquire in fact enjoyed account your blog posts. Anyway I will be subscribing to your augment and even I achievement you access consistently fast.|

  23. Reuben Fecteau

    We are a gaggle of volunteers and opening a new scheme in our community. Your website provided us with useful information to work on. You have performed an impressive job and our entire group will likely be thankful to you.|


Leave a Reply

Your email address will not be published.