Using 'Angular Material' with Angular 5

This is the second part in a seven-part [series](https://blog.wb.gy/angular-5-article-series/) about the JavaScript framework, `Angular 5`. In this part, we'll go over adding `Angular Material` to our application.

This is not intended to be a complete guide, but rather an overview of the basics to get you up and running so you can get to know Angular Material and how to use it with Angular 5.

#Article Series:

1. Creating Angular 5 application with Angular-cli
2. Using Angular Material with Angular 5 (You are here)
3. Deploy Angular 5 Application to Netlify
4. Build PWA with Angular 5 App
5. Build Dynamic themes for Angular Material
6. Using FlexLayout with Angular 5
7. Building News App using Angular 5

Final Demo here

---

#Installing Angular Material

I'll assume that you checked the previous article in this series and now you have an angular application with routes and sass styling, so let's get into how to install Angular Material. In your terminal cd to your application directory and run this line:

Copy
1npm install --save @angular/material @angular/cdk

Some of the material components use the Angular animation library, which is also installed separately

Copy
1npm install --save @angular/animations

Now we have to integrate these animations Open src/app/app.module.ts Now import the animations and add it to imports in @NgModule. Here's the code

Copy
1import { BrowserModule } from "@angular/platform-browser";
2import { NgModule } from "@angular/core";
3import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
4
5import { AppRoutingModule } from "./app-routing.module";
6
7import { ServiceWorkerModule } from "@angular/service-worker";
8import { AppComponent } from "./app.component";
9
10import { environment } from "../environments/environment";
11import { PostsComponent } from "./posts/posts.component";
12
13@NgModule({
14  declarations: [AppComponent, PostsComponent],
15  imports: [
16    BrowserModule,
17    BrowserAnimationsModule,
18    AppRoutingModule,
19    ServiceWorkerModule.register("/ngsw-worker.js", {
20      enabled: environment.production,
21    }),
22  ],
23  providers: [],
24  bootstrap: [AppComponent],
25})
26export class AppModule {}

#Creating Material Module

Now, we have to import the material components we want to use. and import them into the imports array of ngModule. But the material components are too much, so I prefer creating a custom module specifically for our material component imports. Name it material.module.ts Create a new file src/app/material.app.ts and paste the following code.

Copy
1import { NgModule } from "@angular/core";
2
3import {
4  MatButtonModule,
5  MatMenuModule,
6  MatToolbarModule,
7  MatIconModule,
8  MatCardModule,
9  MatGridListModule,
10  MatSidenavModule,
11  MatSortModule,
12  MatTableModule,
13  MatInputModule,
14  MatSelectModule,
15  MatSliderModule,
16  MatRadioModule,
17  MatListModule,
18  MatProgressSpinnerModule,
19  MatChipsModule,
20  MatTooltipModule,
21  MatExpansionModule,
22  MatDialogModule,
23  MatAutocompleteModule,
24  MatTabsModule,
25  MatSlideToggleModule,
26} from "@angular/material";
27
28@NgModule({
29  imports: [
30    MatButtonModule,
31    MatMenuModule,
32    MatToolbarModule,
33    MatIconModule,
34    MatCardModule,
35    MatGridListModule,
36    MatSidenavModule,
37    MatSortModule,
38    MatTableModule,
39    MatInputModule,
40    MatSelectModule,
41    MatSliderModule,
42    MatRadioModule,
43    MatListModule,
44    MatProgressSpinnerModule,
45    MatChipsModule,
46    MatTooltipModule,
47    MatExpansionModule,
48    MatDialogModule,
49    MatAutocompleteModule,
50    MatTabsModule,
51    MatSlideToggleModule,
52  ],
53  exports: [
54    MatButtonModule,
55    MatMenuModule,
56    MatToolbarModule,
57    MatIconModule,
58    MatCardModule,
59    MatGridListModule,
60    MatSidenavModule,
61    MatSortModule,
62    MatTableModule,
63    MatInputModule,
64    MatSelectModule,
65    MatSliderModule,
66    MatRadioModule,
67    MatListModule,
68    MatProgressSpinnerModule,
69    MatChipsModule,
70    MatTooltipModule,
71    MatExpansionModule,
72    MatDialogModule,
73    MatAutocompleteModule,
74    MatTabsModule,
75    MatSlideToggleModule,
76  ],
77})
78export class MaterialModule {}

Here, we only including most of the components in Angular Material I know that it's not the best practice to include all these components. But I prefer to include most of material components so I don't have to add them myself later. I know that I'm too lazy 😎. Next, we have to import material.module.ts into our app.module.ts.

Copy
1import { BrowserModule } from "@angular/platform-browser";
2import { NgModule } from "@angular/core";
3import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
4import { MaterialModule } from "./material.module";
5
6import { AppRoutingModule } from "./app-routing.module";
7
8import { ServiceWorkerModule } from "@angular/service-worker";
9import { AppComponent } from "./app.component";
10
11import { environment } from "../environments/environment";
12import { PostsComponent } from "./posts/posts.component";
13
14@NgModule({
15  declarations: [AppComponent, PostsComponent],
16  imports: [
17    BrowserModule,
18    BrowserAnimationsModule,
19    MaterialModule,
20    AppRoutingModule,
21    ServiceWorkerModule.register("/ngsw-worker.js", {
22      enabled: environment.production,
23    }),
24  ],
25  providers: [],
26  bootstrap: [AppComponent],
27})
28export class AppModule {}

#Theming

Next, we want to add a theme to our material. Open /src/styles.scss and paste the following line

Copy
1@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Now, we need to include *HammerJS for gesture support. In your terminal, type:

Copy
1npm install --save hammerjs

We have to include it, open /src/main.ts

Copy
1import { enableProdMode } from "@angular/core";
2import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
3
4import { AppModule } from "./app/app.module";
5import { environment } from "./environments/environment";
6import "hammerjs";
7
8if (environment.production) {
9  enableProdMode();
10}
11
12platformBrowserDynamic()
13  .bootstrapModule(AppModule)
14  .catch((err) => console.log(err));

#Material Design Icons

One last thing to go, we have to add the Material Design Icons in /src/index.html add the following line before </head>

Copy
1<link
2  href="https://fonts.googleapis.com/icon?family=Material+Icons"
3  rel="stylesheet"
4/>

#Simple Material Example

Let's edit our previous html code, open /src/app/app.component.html and edit it like the following code.

Copy
1<mat-toolbar color="primary">
2  <mat-toolbar-row>
3    <span>Wb.Gy</span> <span className="example-spacer"></span>
4    <a routerLink="/" mat-button>Home</a>
5    <a routerLink="/posts" mat-button>Posts</a>
6  </mat-toolbar-row>
7</mat-toolbar>
8<router-outlet></router-outlet>

I just added some material components like (toolbar, button etc..) You can check the documentation here

We have to add some css to make our page look better, open /src/styles.scss and add the following code:

Copy
1body {
2  margin: 0;
3}

also /src/app/app.component.scss

Copy
1.example-link {
2  padding: 0 14px;
3}
4.example-spacer {
5  flex: 1 1 auto;
6}

Check your page now, it should look like this:

Let's make it more complex and create a component for our home page to display some material components.

But this time I have to mention something as I know you might face a problem while using it.

Now we have 2 modules in our application ( app.module.ts and material.module.ts), so if you want to create new component or service you have to mention where do you want to add your new component. Let's see a practical example. in your terminal run( make sure you're in your root directory first):

Copy
1ng g component home --module app.module.ts

This will create new component named home and will add it to app.module.ts.

First let's add new route for our home component. Open /src/app/app-routing.module.ts. You have to import home component and add it to routes.

Copy
1import { NgModule } from "@angular/core";
2import { Routes, RouterModule } from "@angular/router";
3
4import { PostsComponent } from "./posts/posts.component";
5import { HomeComponent } from "./home/home.component";
6
7const routes: Routes = [
8  {
9    path: "",
10    component: HomeComponent,
11  },
12  {
13    path: "posts",
14    component: PostsComponent,
15  },
16];
17
18@NgModule({
19  imports: [RouterModule.forRoot(routes)],
20  exports: [RouterModule],
21})
22export class AppRoutingModule {}

Now you should see home works! in your browser.

Next I want to add some cool material components. Open /src/app/home/home.component.html

Copy
1<div className="container">
2  <!-- repeat the next div to get the same result as my printscreen -->
3  <div className="mycard">
4    <mat-card className="example-card">
5      <mat-card-header>
6        <div mat-card-avatar className="example-header-image"></div>
7        <mat-card-title>Shiba Inu</mat-card-title>
8        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
9      </mat-card-header>
10      <img
11        mat-card-image
12        src="https://material.angular.io/assets/img/examples/shiba2.jpg"
13        alt="Photo of a Shiba Inu"
14      />
15      <mat-card-content>
16        <p>
17          The Shiba Inu is the smallest of the six original and distinct spitz
18          breeds of dog from Japan. A small, agile dog that copes very well with
19          mountainous terrain, the Shiba Inu was originally bred for hunting.
20        </p>
21      </mat-card-content>
22      <mat-card-actions>
23        <button mat-button>LIKE</button> <button mat-button>SHARE</button>
24      </mat-card-actions>
25    </mat-card>
26  </div>
27</div>

I removed the repeated code for brevity you can add it yourself. and to create the grid I added the following code in /src/app/home/home.component.scss

Copy
1.container {
2  display: flex;
3  flex-wrap: wrap;
4}
5@media only screen and (min-width: 768px) {
6  .container > .mycard {
7    flex-basis: calc(100% / 4);
8  }
9
10  .mycard {
11    padding: 10px;
12  }
13  .example-header-image {
14    background-image: url("../../assets/shiba1.jpg");
15    background-size: cover;
16  }
17
18  @supports (display: grid) {
19    .container {
20      display: grid;
21      grid-template-columns: repeat(4, 1fr);
22    }
23
24    .container > .mycard {
25      flex: 1;
26    }
27  }
28}

Here's the result

Next: Deploy Angular 5 Application to Netlify