Creating Web App Skeleton with Angular-6 & Angular Material

Introduction to CDK (Component Development Kit)

Creating Angular project and setup has been super easy already with the angular-cli. Just run one command and you get project structure, tests setup, webpack everything set up done and configured!. But wait…, with Angular CDK (Component Development Kit), even prototyping is made super easy.

What is Angular CDK?

The goal of the CDK is to give developers more tools to build awesome components for the web. This will be especially useful for projects that want to take advantage of the features of Angular Material without adopting the Material Design visual language. — Angular Team

Start Coding!

In previous post, we checked out what is Angular Lazy Loading and how to implement basic Angular 6 app with lazy loading & routing. We will be making changes to same project. You can download starting point setup from here: Download Setup

At this point, I assume our code is set up and running smooth with routing & lazy loading in place.

Step 1: Add Angular Material to project.

First thing we going to do is add @angular/material to our project, it provides all the awesome looking components designed with googles material specifications. To add angular material, run following command from our project root folder:

ng add @angular/material

Once all the dependencies are downloaded start development server with following command:

ng serve

Step 2: Create Components using material templates

Angular Material, comes with many pre-made templates that we can use with angular-cli to generate new components. We can simply create new components with these material templates and make the changes to suit our application needs.

Lets first create most important part of an app, the navigation component. To create nav component run following command:

ng generate @angular/material:materialNav --name=app-nav

Above command will create all the necessary files for app-nav component and integrate it with app.module. It will also take care of importing all the required material components and add those to app.module’s “imports” array.

Next, we create two more components for admin & staff dashboard each, using material templates using following commands:

ng generate @angular/material:materialDashboard --name=admin/material-dashboard
ng generate @angular/material:materialDashboard --name=staff/material-dashboard

And with these commands, we get material dashboard components with cards, popup menu, grid etc. A very common dashboard layout for admin portals, we can edit these templates as per our application needs.

Step 3: Update the template files as per our application needs!

Now, lets modify app-nav.component.html, and add our app’s routes to the navigation links, and also put “<router-outlet>” tag inside
“<mat-sidenav-content>” tag, so that when we change routes, route components are rendered inside the material sidenav content section. And we will be just changing the “h1” tags in both admin/material-dashboard & staff/material-dashboard html files to “Admin Dashboard” & “Staff Dashboard”, just so that we know when we change the route and route component is rendered.

app-nav.component.html

<mat-sidenav-container class="sidenav-container">
  <mat-sidenav
    #drawer
    class="sidenav"
    fixedInViewport="true"
    [attr.role]="(isHandset$ | async) ? 'dialog' : 'navigation'"
    [mode]="(isHandset$ | async) ? 'over' : 'side'"
    [opened]="!(isHandset$ | async)">
    <mat-toolbar color="primary">Menu</mat-toolbar>
    <mat-nav-list>
      <a mat-list-item routerLink="">Home</a>
      <a mat-list-item routerLink="/admin">Admin Dashboard</a>
      <a mat-list-item routerLink="/staff">Staff Dashboard</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()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>Lazy Loding</span>
    </mat-toolbar>
    <!-- Content Section Start-->
    <router-outlet></router-outlet>
    <!-- Content Section End-->
  </mat-sidenav-content>
</mat-sidenav-container>

Modifications done to template are highlighted in bold.

Step 4: Wire up the routes!

Now, in final step, we update our feature module (admin & staff NgModules) routing to have mapping with new material dashboard, so we update routing modules as follows:

staff-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MaterialDashboardComponent } from './material-dashboard/material-dashboard.component';
const routes: Routes = [
  {
    path: '',
    component: MaterialDashboardComponent
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class StaffRoutingModule { }

admin-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { MaterialDashboardComponent } from './material-dashboard/material-dashboard.component';
const routes: Routes = [
  {
    path: '',
    component: MaterialDashboardComponent
  }
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class AdminRoutingModule { }

And now save and check out application, we should have very professional looking application whit material components, sidebar with navigation. With responsiveness taken care of, try by resizing browser window or toggling into mobile device mode from chrome dev tools.

You can check out live demo here:

https://yqniawkn.github.stackblitz.io/

Download Code