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:

[APP-ROUTING.MODULE.TS]

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' }  
];

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



Then, we insert a simple menu:

[APP.COMPONENT.HTML]

<h1>  
 Angular Material 
</h1>  
<button  routerLink="/">Home</button>  
<button  routerLink="/page1">Page1</button>
<button  routerLink="/page2">Page2</button>
<router-outlet></router-outlet>



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:

[APP.MODULE.TS]

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';

@NgModule({
  declarations: [
    AppComponent,
    Page1Component,
    Page2Component,
    HomePageComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatIconModule,
    MatCardModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }



and finally, we modify the menu created before:

[APP.COMPONENT.HTML]

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



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



37 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.

    Reply
  2. Anonymous

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

    Reply
  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!|

    Reply
    1. Damiano Abballe Post author

      The theme name is Tusi.
      Cheers!

      Reply
  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.|

    Reply
  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!|

    Reply
  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|

    Reply
  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.|

    Reply
  8. Elvis Krieger

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

    Reply
  9. Valeri Maclaughlin

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

    Reply
  10. Lonny Kumro

    Informative article, totally what I wanted to find.|

    Reply
  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.|

    Reply
  12. Archie Matyas

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

    Reply
  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.|

    Reply
  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.|

    Reply
  15. Barbra Kasula

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

    Reply
  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!|

    Reply
  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.|

    Reply
  18. Eloy Heppell

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

    Reply
  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.|

    Reply
  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.|

    Reply
  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!|

    Reply
  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.|

    Reply
  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.|

    Reply
  24. Otis Telander

    I would like to thank you for the efforts you’ve put in writing this site. I really hope to view the same high-grade blog posts by you in the future as well. In truth, your creative writing abilities has encouraged me to get my own, personal website now ;)|

    Reply
  25. Hal Ya

    A motivating discussion is definitely worth comment. I do believe that you should publish more about this topic, it may not be a taboo subject but typically people do not speak about such issues. To the next! Kind regards!!|

    Reply
  26. Willa Pelote

    Your style is so unique compared to other folks I’ve read stuff from. Many thanks for posting when you have the opportunity, Guess I will just bookmark this web site.|

    Reply
  27. Lazaro Gurrieri

    You should be a part of a contest for one of the best blogs on the internet. I will highly recommend this website!|

    Reply
  28. Reid Schiltz

    Howdy very cool site!! Man .. Beautiful .. Amazing .. I’ll bookmark your site and take the feeds also? I am glad to find numerous useful information here within the put up, we need develop extra strategies in this regard, thanks for sharing. . . . . .|

    Reply
  29. Monique

    Hi everyone, it’s my first visit at this web site, and article is really fruitful for me, keep up posting these articles or reviews.|

    Reply
  30. Janel

    Pretty! This was an extremely wonderful article. Many thanks for supplying this info.|

    Reply
  31. Lorenzo

    Hello to every single one, it’s truly a good for me to go to see
    this site, it contains useful Information.

    Reply
  32. Nydia

    Nice post. I learn something new and challenging on blogs I stumbleupon everyday.
    It will always be helpful to read through articles from other authors and practice
    something from their websites.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *