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:
Like!! Thank you for publishing this awesome article.
Everything is very open with a clear description of the issues. It was truly informative.
I couldn’t resist commenting. Perfectly written
I couldn’t refrain from commenting. Exceptionally well written! blog articles.
Thanks a bunch for sharing this with all people you really realize what you’re talking about! Bookmarked.
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!|
The theme name is Tusi.
Cheers!
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.|
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!|
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|
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.|
What’s up, after reading this remarkable article i am too delighted to share my knowledge here with friends.|
Wonderful, what a web site it is! This web site gives helpful information to us, keep it up.|
Informative article, totally what I wanted to find.|
What’s up, all is going fine here and ofcourse every one is sharing information, that’s in fact good, keep up writing.|
Very quickly this web site will be famous amid all blogging people, due to it’s nice content|
For the reason that the admin of this website is working, no doubt very quickly it will be famous, due to its feature contents.|
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.|
Your way of explaining all in this post is genuinely good, all be able to simply understand it, Thanks a lot.|
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!|
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.|
Good info. Lucky me I found your site by accident (stumbleupon). I’ve book marked it for later!|
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.|
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.|
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!|
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.|
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.|
Thanks!