TheLazy.Dev
Portfolio GitHub

Blog

angular |angular6 |angular4

Using Angular Material with Angular 6

geeksamu

Ahmed Abdelsalam

Posted on August 13, 2019

Using Angular Material with Angular 6

This is the third part in an n-part series about the JavaScript framework, Angular 6.

In this part, we'll go over using Angular Material with Angular 6 Applicatin.

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 using Angular Material and how to use it with our Angular 6 application.

Before we begin, English is not my first language, so if you see something weird, please, calmly point it out in the comment section or email me, there’s no need for violence :)

Article Series

  1. Angular 6 Article Series
  2. Building Angular 6 Application
  3. Using Angular Material with Angular 6 ( You’re here )
  4. Deploy Angular 6 Application to Netlify
  5. Creating PWA with Angular 6 ( Soon )
  6. Dynamic themes in Angular 6 Material ( Soon )
  7. Angular 6 with GSAP ( Soon )
  8. Angular 6 with Firebase ( Soon )

First you must check the previous article in this series to create new Angular6 Application.

Now using the new ng add in Angular-CLI let's install the Angular Material. In your application root directory run:

ng add @angular/material @angular/cdk
Enter fullscreen mode Exit fullscreen mode

It updated the package.json and angular.json

Added BrowserAnimationsModule to your app.module.ts file

Added Material Icons,Roboto Font to index.html

You can generate a starter component including a toolbar and a side navigation.

Run:

ng generate @angular/material:material-nav --name=navbar
Enter fullscreen mode Exit fullscreen mode

This will generate a component named navbar and will add some material components to app.module.ts.

Let’s add our navbar to app.component.html

Open /src/app/app.component.html and add the navbar tag, your code should look like

\<navbar\>\</navbar\>
\<router-outlet\>\</router-outlet\>
Enter fullscreen mode Exit fullscreen mode

If you’re running a server for our app check your browser or run

ng serve --open
Enter fullscreen mode Exit fullscreen mode

to see the changes we made.

But I think there’s something wrong with our menu. I fixed it and changed the links of the menu by adding our home and posts routes.

Here’s the final code of /src/app/navbar/navbar.component.html

\<mat-sidenav-container class="sidenav-container"\>
 \<mat-sidenav
 #drawer
 class="sidenav"
 fixedInViewport="true"
 [attr.role]="isHandset ? 'dialog' : 'navigation'"
 [mode]="(isHandset | async)!.matches ? 'over' : 'side'"
 [opened]="!(isHandset | async)!.matches"\>
 \<mat-toolbar color="primary"\>Menu\</mat-toolbar\>
 \<mat-nav-list\>
 \<a mat-list-item routerLink="/"\>Home\</a\>
 \<a mat-list-item routerLink="posts"\>Posts\</a\>
 \</mat-nav-list\>
 \</mat-sidenav\>
 \<mat-sidenav-content\>
 \<mat-toolbar color="primary"\>
 \<button
 type="button"
 aria-label="Toggle sidenav"
 mat-icon-button
 (click)="drawer.toggle()"
 \>
 \<mat-icon aria-label="Side nav toggle icon"\>menu\</mat-icon\>
 \</button\>
 \<span\>Application Title\</span\>
 \</mat-toolbar\>
 \</mat-sidenav-content\>
\</mat-sidenav-container\>
Enter fullscreen mode Exit fullscreen mode

You can also generate a starter dashboard component containing a dynamic grid list of cards.

Run:

ng generate @angular/material:material-dashboard --name=dash
Enter fullscreen mode Exit fullscreen mode

You can see the result by adding <dash></dash> tag to your app.component.html

Your final /src/app/app.component.html should look like

\<navbar\>\</navbar\>
\<dash\>\</dash\>
\<router-outlet\>\</router-outlet\>
Enter fullscreen mode Exit fullscreen mode

You can generate a starter data table component that is pre-configured with a datasource for sorting and pagination.

Run:

ng generate @angular/material:material-table --name=data-table
Enter fullscreen mode Exit fullscreen mode

And add it like the previous one to see the results.

This new features of Angular 6 are cool but I prefer to put all the Material Modules in separated file named material.module.ts and I prefer to import most of the modules once. I don't like importing one by one. I know that it's not the best practice

So Let's edit our 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 { HomeComponent } from './home/home.component';
import { PostsComponent } from './posts/posts.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material.module';

import { NavbarComponent } from './navbar/navbar.component';
import { LayoutModule } from '@angular/cdk/layout';
import { DashComponent } from './dash/dash.component';
import { DataTableComponent } from './data-table/data-table.component';

@NgModule({
 declarations: [
 AppComponent,
 HomeComponent,
 PostsComponent,
 NavbarComponent,
 DashComponent,
 DataTableComponent
 ],
 imports: [
 BrowserModule,
 AppRoutingModule,
 BrowserAnimationsModule,
 MaterialModule,
 LayoutModule
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }
Enter fullscreen mode Exit fullscreen mode

and create new file /src/app/material.module.ts and add the following code:

import { NgModule } from '@angular/core';

import {
 MatButtonModule,
 MatMenuModule,
 MatToolbarModule,
 MatIconModule,
 MatCardModule,
 MatGridListModule,
 MatSidenavModule,
 MatSortModule,
 MatTableModule,
 MatInputModule,
 MatSelectModule,
 MatSliderModule,
 MatRadioModule,
 MatListModule,
 MatProgressSpinnerModule,
 MatChipsModule,
 MatTooltipModule,
 MatExpansionModule,
 MatDialogModule,
 MatAutocompleteModule,
 MatTabsModule,
 MatSlideToggleModule,
 MatPaginatorModule

} from '@angular/material';

@NgModule({
 imports: [
 MatButtonModule,
 MatMenuModule,
 MatToolbarModule,
 MatIconModule,
 MatCardModule,
 MatGridListModule,
 MatSidenavModule,
 MatSortModule,
 MatTableModule,
 MatInputModule,
 MatSelectModule,
 MatSliderModule,
 MatRadioModule,
 MatListModule,
 MatProgressSpinnerModule,
 MatChipsModule,
 MatTooltipModule,
 MatExpansionModule,
 MatDialogModule,
 MatAutocompleteModule,
 MatTabsModule,
 MatSlideToggleModule,
 MatPaginatorModule

],
 exports: [
 MatButtonModule,
 MatMenuModule,
 MatToolbarModule,
 MatIconModule,
 MatCardModule,
 MatGridListModule,
 MatSidenavModule,
 MatSortModule,
 MatTableModule,
 MatInputModule,
 MatSelectModule,
 MatSliderModule,
 MatRadioModule,
 MatListModule,
 MatProgressSpinnerModule,
 MatChipsModule,
 MatTooltipModule,
 MatExpansionModule,
 MatDialogModule,
 MatAutocompleteModule,
 MatTabsModule,
 MatSlideToggleModule,
 MatPaginatorModule

]
})
export class MaterialModule {}
Enter fullscreen mode Exit fullscreen mode

Now, we need to include *HammerJS for gesture support.

In your terminal, type:

npm install --save hammerjs
Enter fullscreen mode Exit fullscreen mode

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

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import 'hammerjs';

if (environment.production) {
 enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
 .catch(err =\> console.log(err));
Enter fullscreen mode Exit fullscreen mode

Now 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. If we want to create new component named test

in your terminal run( make sure you're in your root directory first):

ng g component test --module app.module.ts
Enter fullscreen mode Exit fullscreen mode

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

If you forgot to add the --module argument you'll get an error next time adding new component.

That’s all for now

Next: Deploy Angular 6 Application to Netlify

If you liked this article, hit that clap button below 👏. check out other articles I’ve written here. And If you find this story useful. As I don’t use Medium Partner Program. Consider a donation through PayPal, or ‘Buy Me a Coffee' :)

Buy Ahmed Abdelsalam a Coffee. ko-fi.com/geeksamu

If you have any question comment it below or You can find me on Twitter @geeksamu

Ahmed ⚯͛ (@geeksamu) | Twitter

💖 💪 🙅 🚩
geeksamu
Ahmed Abdelsalam

Posted on August 13, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Using Angular Material with Angular 6
angular Using Angular Material with Angular 6

August 13, 2019