Build an Angular 6 Material CRUD Forms – Part 2

This is the second part of Building an Angular 6 Material CRUD Forms. You will learn how to:

• Part 1 – Create a SPA
• Part 2 – Create a Core Module (This Post)
• Part 3 – Create a Shared Module
• Part 4 – Create a Contacts Module
• Part 5 – Create a Page Not Found Module

The source code for this tutorial series is published on GitHub. Demo application is hosted in Microsoft Azure.

Part 2: Create a Core Module

In the previous tutorial, we created the initial structure of the Single-Page Application (SPA) using Angular 6. In this tutorial, we will use the same technologies to create a Core Module.

Client-Side Technologies:

• Angular 6.0.8
• Angular CLI 6.0.8
• TypeScript 2.7.2
• Angular Material 7.2.1
• In Memory Web Api 0.8.0
• Reactive Extensions Library for JavaScript 6.3.3

The application structure, styles, and patterns follow the recommendations outlined in the official Angular Style Guide. 

Task 1. Review the Core Module Structure

1. The CoreModule contains the following components and services:

   C#

   angular-material-crud-forms // Workspace Folder |--src |--core // Core Module |--database // In Memory Service |--in-memory-data.service.ts |--logger // Logger |--logger.service.ts |--main-layout // Layout Component |--main-layout.component.html |--main-layout.component.scss |--main-layout.component.ts |--nav-bar // Navbar Component |--nav-bar.component.html |--nav-bar.component.scss |--nav-bar.component.ts |--toast // Toast Service |--toast.service.ts |--toolbar // Toolbar Component |--toolbar.component.html |--toolbar.component.scss |--toolbar.component.ts |--core.module.ts |--index.ts // Barrel |--module-import-guard.ts // Module Import Guard

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

   angular-material-crud-forms                    // Workspace Folder       |--src             |--core                                // Core Module                                 |--database                        //     In Memory Service                 |--in-memory-data.service.ts               |--logger                          //     Logger                 |--logger.service.ts               |--main-layout                     //     Layout Component                 |--main-layout.component.html                 |--main-layout.component.scss                 |--main-layout.component.ts             |--nav-bar                         //     Navbar Component                 |--nav-bar.component.html                 |--nav-bar.component.scss                 |--nav-bar.component.ts             |--toast                           //     Toast Service                 |--toast.service.ts               |--toolbar                         //     Toolbar Component                 |--toolbar.component.html                 |--toolbar.component.scss                 |--toolbar.component.ts                         |--core.module.ts             |--index.ts                        //     Barrel                             |--module-import-guard.ts          //     Module Import Guard

   The CoreModule provides singleton services, global components, and core functionalities. Only the root AppModule should import the CoreModule.

Task 2: Create In Memory Data Service

1. Run the following CLI command to create an InMemoryDataService:
        ng generate service core/database/in-memory-data

2. Open the service named in-memory-data.service.ts file in the database folder.

3. Replace the code in this file with the following:

   JavaScript

   import { Injectable } from '@angular/core'; import { InMemoryDbService } from 'angular-in-memory-web-api'; @Injectable({ // Declare that this service should be created // by the root application injector providedIn: 'root' }) export class InMemoryDataService implements InMemoryDbService { // Create a "database" with a set of collection named "contacts" createDb() { const contacts = [ { id: 1, firstName: 'Quinn', lastName: 'Nixon', email: 'qnixon@gmail.com', work: 'design', street: '1760 Hillhurst Ave', city: 'Los Angeles', state: 'CA', zip: '90027' }, { id: 2, firstName: 'Eric', lastName: 'Smith', email: 'esmith@gmail.com', work: 'code', street: '1910 Pacific Ave', city: 'Dallas', state: 'TX', zip: '75201' }, { id: 3, firstName: 'Carlson', lastName: 'Cox', email: 'ccox@gmail.com', work: 'deploy', street: '12345 Beltline Rd', city: 'Dallas', state: 'TX', zip: '75080' }, { id: 4, firstName: 'Kelsea', lastName: 'Kelly', email: 'kkelly@gmail.com', work: 'design', street: '33915 Coal Heritage Rd', city: 'Northfork', state: 'WV', zip: '24868' }, { id: 5, firstName: 'Aino', lastName: 'Uno', email: 'auno@gmail.com', work: 'code', street: '185 N High St', city: 'Columbus', state: 'OH', zip: '43215' }, { id: 6, firstName: 'Amy', lastName: 'Little', email: 'alittle@gmail.com', work: 'deploy', street: '3601 Dallas Pkwy', city: 'Plano', state: 'TX', zip: '75093' }, { id: 7, firstName: 'Doris', lastName: 'Chandler', email: 'dchandler@gmail.com', work: 'design', street: '1660 India St', city: 'San Diego', state: 'CA', zip: '92110' }, { id: 8, firstName: 'Brielle', lastName: 'Davidson', email: 'bdavidson@gmail.com', work: 'code', street: '5640 Kearny Mesa Rd Ste H', city: 'San Diego', state: 'CA', zip: '92110' }, { id: 9, firstName: 'Vivian', lastName: 'Hurst', email: 'vhurst@gmail.com', work: 'deploy', street: '3960 W Point Loma Blvd', city: 'San Diego', state: 'CA', zip: '92110' }, { id: 10, firstName: 'Haley', lastName: 'Frost', email: 'hforst@gmail.com', work: 'design', street: '1443 W Fullerton Ave', city: 'Chicago', state: 'IL', zip: '60614' }, { id: 11, firstName: 'Fiona', lastName: 'Gaines', email: 'fgaines@gmail.com', work: 'code', street: '1443 W Fullerton Ave', city: 'Chicago', state: 'IL', zip: '60603' }, { id: 12, firstName: 'Olivia', lastName: 'Flynn', email: 'oflynn@gmail.com', work: 'deploy', street: '1541 W Bryn Mawr Ave', city: 'Chicago', state: 'IL', zip: '60660' }, { id: 13, firstName: 'Jennifer', lastName: 'Marshall', email: 'jmarshall@gmail.com', work: 'design', street: '509 Amsterdam Ave', city: 'New York', state: 'NY', zip: '10024' }, { id: 14, firstName: 'Hope', lastName: 'Kennedy', email: 'hkennedy@gmail.com', work: 'code', street: '524 Court St', city: 'Brooklyn', state: 'NY', zip: '11231' }, { id: 15, firstName: 'Sandra', lastName: 'Fitzpatrick', email: 'sfitzpatrick@gmail.com', work: 'deploy', street: '565 Gorge Rd', city: 'cliffside Park', state: 'NJ', zip: '07010' }, { id: 16, firstName: 'Ashton', lastName: 'Silva', email: 'asilva@gmail.com', work: 'design', street: '4529 Sand Point Way NE', city: 'Seattle', state: 'WA', zip: '98105' }, { id: 17, firstName: 'Peter', lastName: 'Byrd', email: 'pbyrd@gmail.com', work: 'deploy', street: '710 8th Ave S', city: 'Seattle', state: 'WA', zip: '98104' } ]; return { contacts }; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212

   import { Injectable } from '@angular/core';   import { InMemoryDbService } from 'angular-in-memory-web-api';   @Injectable({     // Declare that this service should be created     // by the root application injector     providedIn: 'root' }) export class InMemoryDataService implements InMemoryDbService {     // Create a "database" with a set of collection named "contacts"     createDb() {                  const contacts = [             {                 id: 1,                 firstName: 'Quinn',                 lastName: 'Nixon',                 email: 'qnixon@gmail.com',                 work: 'design',                 street: '1760 Hillhurst Ave',                 city: 'Los Angeles',                 state: 'CA',                 zip: '90027'             },             {                 id: 2,                 firstName: 'Eric',                 lastName: 'Smith',                 email: 'esmith@gmail.com',                 work: 'code',                 street: '1910 Pacific Ave',                 city: 'Dallas',                 state: 'TX',                 zip: '75201'               },             {                 id: 3,                 firstName: 'Carlson',                 lastName: 'Cox',                 email: 'ccox@gmail.com',                 work: 'deploy',                 street: '12345 Beltline Rd',                 city: 'Dallas',                 state: 'TX',                 zip: '75080'               },             {                 id: 4,                 firstName: 'Kelsea',                 lastName: 'Kelly',                 email: 'kkelly@gmail.com',                 work: 'design',                 street: '33915 Coal Heritage Rd',                 city: 'Northfork',                 state: 'WV',                 zip: '24868'             },             {                 id: 5,                 firstName: 'Aino',                 lastName: 'Uno',                 email: 'auno@gmail.com',                 work: 'code',                 street: '185 N High St',                 city: 'Columbus',                 state: 'OH',                 zip: '43215'             },             {                 id: 6,                 firstName: 'Amy',                 lastName: 'Little',                 email: 'alittle@gmail.com',                 work: 'deploy',                 street: '3601 Dallas Pkwy',                 city: 'Plano',                 state: 'TX',                 zip: '75093'             },             {                 id: 7,                 firstName: 'Doris',                 lastName: 'Chandler',                 email: 'dchandler@gmail.com',                 work: 'design',                 street: '1660 India St',                 city: 'San Diego',                 state: 'CA',                 zip: '92110'               },             {                 id: 8,                 firstName: 'Brielle',                 lastName: 'Davidson',                 email: 'bdavidson@gmail.com',                 work: 'code',                 street: '5640 Kearny Mesa Rd Ste H',                 city: 'San Diego',                 state: 'CA',                 zip: '92110'             },             {                 id: 9,                 firstName: 'Vivian',                 lastName: 'Hurst',                 email: 'vhurst@gmail.com',                 work: 'deploy',                 street: '3960 W Point Loma Blvd',                 city: 'San Diego',                 state: 'CA',                 zip: '92110'             },             {                 id: 10,                 firstName: 'Haley',                 lastName: 'Frost',                 email: 'hforst@gmail.com',                 work: 'design',                 street: '1443 W Fullerton Ave',                 city: 'Chicago',                 state: 'IL',                 zip: '60614'             },             {                 id: 11,                 firstName: 'Fiona',                 lastName: 'Gaines',                 email: 'fgaines@gmail.com',                 work: 'code',                 street: '1443 W Fullerton Ave',                 city: 'Chicago',                 state: 'IL',                 zip: '60603'             },             {                 id: 12,                 firstName: 'Olivia',                 lastName: 'Flynn',                 email: 'oflynn@gmail.com',                 work: 'deploy',                 street: '1541 W Bryn Mawr Ave',                 city: 'Chicago',                 state: 'IL',                 zip: '60660'               },             {                 id: 13,                 firstName: 'Jennifer',                 lastName: 'Marshall',                 email: 'jmarshall@gmail.com',                 work: 'design',                 street: '509 Amsterdam Ave',                 city: 'New York',                 state: 'NY',                 zip: '10024'               },             {                 id: 14,                 firstName: 'Hope',                 lastName: 'Kennedy',                 email: 'hkennedy@gmail.com',                 work: 'code',                 street: '524 Court St',                 city: 'Brooklyn',                 state: 'NY',                 zip: '11231'             },             {                 id: 15,                 firstName: 'Sandra',                 lastName: 'Fitzpatrick',                 email: 'sfitzpatrick@gmail.com',                 work: 'deploy',                 street: '565 Gorge Rd',                 city: 'cliffside Park',                 state: 'NJ',                 zip: '07010'               },             {                 id: 16,                 firstName: 'Ashton',                 lastName: 'Silva',                 email: 'asilva@gmail.com',                 work: 'design',                 street: '4529 Sand Point Way NE',                 city: 'Seattle',                 state: 'WA',                 zip: '98105'             },             {                 id: 17,                 firstName: 'Peter',                 lastName: 'Byrd',                 email: 'pbyrd@gmail.com',                 work: 'deploy',                 street: '710 8th Ave S',                 city: 'Seattle',                 state: 'WA',                 zip: '98104'             }         ];           return { contacts };     } }

   We use In-memory Web API to simulate CRUD data persistence operations without a real server. It intercepts Angular HTTPClient requests, redirects them to the in-memory data store – contacts collection, and returns simulated responses.

Task 3: Create the Logger

1. Run the following CLI command to create a Logger:
        ng generate service core/logger/logger

2. Open the service named logger.service.ts file in the logger folder.

3. Replace the code in this file with the following:

   JavaScript

   import { Injectable } from '@angular/core'; @Injectable({ // Declare that this service should be created // by the root application injector providedIn: 'root' }) export class Logger { log(msg: string) { console.log(msg); } error(msg: string) { console.error(msg); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   import { Injectable } from '@angular/core';   @Injectable({   // Declare that this service should be created   // by the root application injector   providedIn: 'root' }) export class Logger {     log(msg: string) {         console.log(msg);     }       error(msg: string) {         console.error(msg);     } }

   The Logger class logs the message to the browser console.

Task 4: Create the Layout Component

1. Run the following CLI command to create a MainLayoutComponent:
        ng generate component core/main-layout/main-layout --flat --skipImport=true

2. Open the component named main-layout.component.ts file in the main-layout folder.

3. Replace the code in this file with the following:

   JavaScript

   import { Component, Input, ViewChild } from '@angular/core'; import { MatSidenav } from '@angular/material'; @Component({ selector: 'app-main-layout', templateUrl: './main-layout.component.html', styleUrls: ['./main-layout.component.scss'] }) export class MainLayoutComponent { // Receive menu object and title from the parent 'AppComponent' @Input() title: string; @Input() menu: Array<Object>; @ViewChild('sidenav') sidenav: MatSidenav; constructor() { } toggleSidenav() { // trigger the child component's 'toggle' method this.sidenav.toggle(); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

   import { Component, Input, ViewChild } from '@angular/core'; import { MatSidenav } from '@angular/material';   @Component({     selector: 'app-main-layout',     templateUrl: './main-layout.component.html',     styleUrls: ['./main-layout.component.scss'] })   export class MainLayoutComponent {     // Receive menu object and title from the parent 'AppComponent'     @Input() title: string;     @Input() menu: Array<Object>;          @ViewChild('sidenav') sidenav: MatSidenav;       constructor() { }       toggleSidenav() {         // trigger the child component's 'toggle' method         this.sidenav.toggle();     } }

   The MainLayoutComponent can toggle the #sidenav menu.

4. Open the view named main-layout.component.html file in the main-layout folder.

5. Replace the code in this file with the following:

   JavaScript

   <!-- Toolbar includes logo, titles, and actions --> <app-toolbar [title]="title" [menu]="menu" (toggleSidebar)="toggleSidenav()"></app-toolbar> <!-- End Toolbar --> <mat-sidenav-container fullscreen> <!-- Collapsible side content --> <mat-sidenav #sidenav [mode]="'over'" class="navbar"> <app-navbar [menu]="menu"></app-navbar> </mat-sidenav> <!-- End Collapsible side content --> <!-- Main Content Area --> <div class="main-content"> <div class="mat-app-background"> <!-- Routed view --> <router-outlet></router-outlet> </div> </div> <!-- End Main Content Area --> </mat-sidenav-container>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

   <!-- Toolbar includes logo, titles, and actions --> <app-toolbar [title]="title" [menu]="menu" (toggleSidebar)="toggleSidenav()"></app-toolbar> <!-- End Toolbar -->   <mat-sidenav-container fullscreen>       <!-- Collapsible side content -->     <mat-sidenav #sidenav [mode]="'over'" class="navbar">         <app-navbar [menu]="menu"></app-navbar>     </mat-sidenav>     <!-- End Collapsible side content -->       <!-- Main Content Area -->     <div class="main-content">         <div class="mat-app-background">             <!-- Routed view  -->             <router-outlet></router-outlet>         </div>     </div>     <!-- End Main Content Area -->      </mat-sidenav-container>

   The main-layout.component.html file contains the master layout for our HTML. It provides a shell with three regions: a toolbar area, a collapsible side content, and a main content area. The toolbar area renders the ToolbarComponent‘s view between the app-toolbar tags. The collapsible sidebar area renders the NavbarComponent‘s view between the app-navbar tags. The main content area uses router-outlet directive to display the views produced by the Router. In other words, when you click a navigation link, it’s corresponding view is loaded in the main content area.

6. The following highlighted code uses an Angular’s property binding to pass data from the parent MainLayoutComponent to the child component:

   • Line 2 uses [title]="title" to pass the value of title and [menu]="menu" to pass menu object to the child ToolbarComponent.
   • Line 8 uses [menu]="menu" to pass menu object to the child NavbarComponent.

7. Line 2 uses an Angular’s event binding to bind the (toggleSidebar) event to toggleSidenav().

8. Open the styles named main-layout.component.scss file in the main-layout folder.

9. Replace the code in this file with the following:

   JavaScript

   // @import "./../../../styles/settings/breakpoints.scss"; // @import "./../../../styles/settings/layout.scss"; // @import "./../../../styles/settings/colors.scss"; @import "breakpoints"; @import "layout"; @import "custom-colors"; .main-content { padding: { top: 0; left: 15px; right: 15px; bottom: 0; } @include breakpoint($narrow-devices) { padding: { left: 15px; right: 15px; } } height: 100%; overflow: auto; } .navbar { min-width: 300px; max-width: 300px; } :host /deep/.mat-sidenav-container[fullscreen] { top: 55px; @include breakpoint($narrow-devices) { top: 64px; } } // See https://github.com/angular/material2/issues/998 :host /deep/ .mat-sidenav-content { transform: none !important; } .main-content { & /deep/ .outlet, & /deep/ .maxed-width { @include breakpoint($narrow-devices) { max-width: $page-max-width; margin: { left: auto; right: auto; } } } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

   // @import "./../../../styles/settings/breakpoints.scss"; // @import "./../../../styles/settings/layout.scss"; // @import "./../../../styles/settings/colors.scss"; @import "breakpoints";           @import "layout"; @import "custom-colors";   .main-content {     padding: {         top: 0;         left: 15px;         right: 15px;         bottom: 0;     }     @include breakpoint($narrow-devices) {         padding: {             left: 15px;             right: 15px;         }     }     height: 100%;     overflow: auto; }   .navbar {     min-width: 300px;     max-width: 300px; }   :host /deep/.mat-sidenav-container[fullscreen] {     top: 55px;     @include breakpoint($narrow-devices) {         top: 64px;     } }   // See https://github.com/angular/material2/issues/998 :host /deep/ .mat-sidenav-content {     transform: none !important; }   .main-content {     & /deep/ .outlet,     & /deep/ .maxed-width {         @include breakpoint($narrow-devices) {                 max-width: $page-max-width;                 margin: {                     left: auto;                     right: auto;                 }         }     } }

   Setting the stylePreprocessorOptions with includePaths option in the angular.json file has shorten the @import statements in Lines 4 – 6.

Task 5: Create the Navbar Component

1. Run the following CLI command to create a NavbarComponent:
        ng generate component core/navbar/navbar --flat --skipImport=true

2. Open the component named navbar.component.ts file in the navbar folder.

3. Replace the code in this file with the following:

   JavaScript

   import { ChangeDetectionStrategy, Component, OnInit, Input } from '@angular/core'; @Component({ selector: 'app-navbar', templateUrl: './navbar.component.html', styleUrls: ['./navbar.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class NavbarComponent implements OnInit { // Receive menu data from the parent 'MainLayoutComponent' @Input() menu: Array<Object>; constructor() { } ngOnInit() { } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   import { ChangeDetectionStrategy, Component, OnInit, Input } from '@angular/core'; @Component({     selector: 'app-navbar',     templateUrl: './navbar.component.html',     styleUrls: ['./navbar.component.scss'],     changeDetection: ChangeDetectionStrategy.OnPush }) export class NavbarComponent implements OnInit {     // Receive menu data from the parent 'MainLayoutComponent'     @Input() menu: Array<Object>;          constructor() { }     ngOnInit() {     } }

4. Open the view named navbar.component.html file in the navbar folder.

5. Replace the code in this file with the following:

   JavaScript

   <mat-list class="sidenav-menu"> <mat-list-item *ngFor="let menu_item of menu; let i = index"> <a class="sidenav-menu-item-static" mat-button [href]="[menu_item.url]" target="_blank" rel="noopener"> <span>{{ menu_item.name }}</span> </a> </mat-list-item> </mat-list>

   1 2 3 4 5 6 7

   <mat-list class="sidenav-menu">     <mat-list-item *ngFor="let menu_item of menu; let i = index">         <a class="sidenav-menu-item-static" mat-button [href]="[menu_item.url]" target="_blank" rel="noopener">             <span>{{ menu_item.name }}</span>         </a>     </mat-list-item> </mat-list>

   We are using the *ngFor directive to iterate through the array of menu and display the menu items.

Task 6: Create the Toast Service

1. Run the following CLI command to create a ToastService:
        ng generate service core/toast/toast

2. Open the service named toast.service.ts file in the toast folder.

3. Replace the code in this file with the following:

   JavaScript

   import { Injectable } from '@angular/core'; import { MatSnackBar } from '@angular/material'; @Injectable({ providedIn: 'root' }) export class ToastService { constructor(public snackBar: MatSnackBar) { } openSnackBar(message: string, action: string) { this.snackBar.open(message, action, { duration: 2000 }); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   import { Injectable } from '@angular/core'; import { MatSnackBar } from '@angular/material';   @Injectable({     providedIn: 'root' }) export class ToastService {     constructor(public snackBar: MatSnackBar) { }       openSnackBar(message: string, action: string) {         this.snackBar.open(message, action, {             duration: 2000         });     } }

   The ToastService opens a snack-bar that contains a simple message with an action for 2 seconds.

Task 7: Create the Toolbar Component

1. Run the following CLI command to create a ToolbarComponent:
        ng generate component core/toolbar/toolbar --flat --skipImport=true

2. Open the component named toolbar.component.ts file in the toolbar folder.

3. Replace the code in this file with the following:

   JavaScript

   import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; @Component({ selector: 'app-toolbar', templateUrl: './toolbar.component.html', styleUrls: ['./toolbar.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush }) export class ToolbarComponent implements OnInit { // Receive menu object and title from the parent 'MainLayoutComponent' @Input() menu: Array<Object>; @Input() title: string; // Raise the event to the parent 'MainLayoutComponent' @Output() toggleSidebar = new EventEmitter(); sidebarOpened = false; ngOnInit() { } /** * Toggle the sidenav menu. */ toggleSidenav() { this.sidebarOpened = !this.sidebarOpened; this.toggleSidebar.emit(this.sidebarOpened); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

   import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';   @Component({     selector: 'app-toolbar',     templateUrl: './toolbar.component.html',     styleUrls: ['./toolbar.component.scss'],     changeDetection: ChangeDetectionStrategy.OnPush }) export class ToolbarComponent implements OnInit {     // Receive menu object and title from the parent 'MainLayoutComponent'     @Input() menu: Array<Object>;     @Input() title: string;     // Raise the event to the parent 'MainLayoutComponent'     @Output() toggleSidebar = new EventEmitter();          sidebarOpened = false;       ngOnInit() {     }       /**      * Toggle the sidenav menu.      */     toggleSidenav() {         this.sidebarOpened = !this.sidebarOpened;         this.toggleSidebar.emit(this.sidebarOpened);     } }

4. Open the view named toolbar.component.html file in the toolbar folder.

5. Replace the code in this file with the following:

   JavaScript

   <mat-toolbar class="header-toolbar mat-elevation-z6"> <button class="sidenav-toggle" aria-label="Toggle Sidebar" (click)="toggleSidenav()"> <mat-icon class="menu-icon" aria-label="Side nav toggle icon">menu</mat-icon> </button> <div class="all-menu"> <a [routerLink]="''"> <img alt="angular" class="docs-angular-logo" src="../../../assets/img/angular-white-transparent.svg"> <span class="app-title">Material CRUD Forms</span> </a> </div> <div class="desktop-menu"> <span class="spacer"></span> <a *ngFor="let menu_item of menu; let i = index" [href]="[menu_item.url]" target="_blank" rel="noopener" mat-button class="menu-item">{{ menu_item.name }}</a> </div> </mat-toolbar>

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   <mat-toolbar class="header-toolbar mat-elevation-z6">     <button class="sidenav-toggle" aria-label="Toggle Sidebar" (click)="toggleSidenav()">         <mat-icon class="menu-icon" aria-label="Side nav toggle icon">menu</mat-icon>     </button>     <div class="all-menu">         <a [routerLink]="''">             <img alt="angular" class="docs-angular-logo" src="../../../assets/img/angular-white-transparent.svg">             <span class="app-title">Material CRUD Forms</span>         </a>     </div>     <div class="desktop-menu">         <span class="spacer"></span>         <a *ngFor="let menu_item of menu; let i = index" [href]="[menu_item.url]" target="_blank" rel="noopener" mat-button class="menu-item">{{ menu_item.name }}</a>     </div> </mat-toolbar>

   Clicking the menu icon in the top left corner of the toolbar, a click event calls the toggleSidenav() method in turn to tell MainLayoutComponent to toggle the #sidenav menu.

6. Open the style named toolbar.component.scss file in the toolbar folder.

7. Replace the code in this file with the following:

   JavaScript

   // @import "./../../../styles/settings/breakpoints.scss"; // @import "./../../../styles/settings/colors.scss"; @import "breakpoints"; @import "custom-colors"; :host { z-index: 1; position: fixed; top: 0; width: 100%; } .app-title { font-size: 13px; //text-transform: uppercase; @include breakpoint($narrow-devices) { display: none; } } .sidenav-toggle { @include breakpoint($narrow-devices) { display: none; } } .all-menu { .app-title { display: inline-block; color: $white; } } .desktop-menu { display: none; @include breakpoint($narrow-devices) { display: flex; width: 100%; } } .github-logo { img { margin-right: 10px; } } .sidenav-toggle { cursor: pointer; margin-right: 10px; color: $white; &:focus, &:hover, &:active { outline: none; } } .menu-item { text-transform: uppercase; font-size: 13px; } .spacer { flex: 1 1 auto; } .header-toolbar { //background-color: $header-color; background-color: $dark-color; color: $white; box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 12px -5px rgba(255,152,0,.46); } .docs-angular-logo { height: 26px; margin: 0 4px 3px 0; vertical-align: middle; }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80

   // @import "./../../../styles/settings/breakpoints.scss"; // @import "./../../../styles/settings/colors.scss"; @import "breakpoints"; @import "custom-colors";   :host {     z-index: 1;     position: fixed;     top: 0;     width: 100%; }   .app-title {     font-size: 13px;     //text-transform: uppercase;     @include breakpoint($narrow-devices) {         display: none;     } }   .sidenav-toggle {     @include breakpoint($narrow-devices) {         display: none;     } }   .all-menu {     .app-title {         display: inline-block;         color: $white;     } }   .desktop-menu {     display: none;          @include breakpoint($narrow-devices) {         display: flex;         width: 100%;     } }   .github-logo {     img {         margin-right: 10px;     } }   .sidenav-toggle {     cursor: pointer;     margin-right: 10px;     color: $white;     &:focus,     &:hover,     &:active {         outline: none;     } }   .menu-item {     text-transform: uppercase;     font-size: 13px; }   .spacer {     flex: 1 1 auto; }   .header-toolbar {     //background-color: $header-color;     background-color: $dark-color;     color: $white;     box-shadow: 0 4px 20px 0 rgba(0,0,0,.14), 0 7px 12px -5px rgba(255,152,0,.46); }   .docs-angular-logo {     height: 26px;     margin: 0 4px 3px 0;     vertical-align: middle; }

   Setting the stylePreprocessorOptions with includePaths option in the angular.json file has shorten the @import statements in Lines 3 – 4.

Task 8: Create the Import Guard Function

1. Add a file named module-import-guard.ts in the core folder.

2. Replace the code in this file with the following:

   JavaScript

   export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) { if (parentModule) { throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`); } }

   1 2 3 4 5

   export function throwIfAlreadyLoaded(parentModule: any, moduleName: string) {     if (parentModule) {         throw new Error(`${moduleName} has already been loaded. Import Core modules in the AppModule only.`);     } }

   Only the root AppModule should import the CoreModule. This function throwIfAlreadyLoaded guards against reimporting of the CoreModule.

Task 9. Create the Core Module

1. Run the following CLI command to create a CoreModule:
        ng generate module core

2. Open the module named core.module.ts file in the core folder.

3. Replace the code in this file with the following:

   JavaScript

   import { NgModule, Optional, SkipSelf } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api' import { RouterModule } from '@angular/router'; import { MaterialModule } from '@app/material/material.module'; import { InMemoryDataService } from './database/in-memory-data.service'; import { Logger } from './logger/logger.service'; import { MainLayoutComponent } from './main-layout/main-layout.component'; import { NavbarComponent } from './navbar/navbar.component'; import { throwIfAlreadyLoaded } from './module-import-guard'; import { ToastService } from './toast/toast.service'; import { ToolbarComponent } from './toolbar/toolbar.component'; @NgModule({ imports: [ CommonModule, MaterialModule, HttpClientModule, // The HttpClientInMemoryWebApiModule module intercepts HTTP requests // and returns simulated server responses. // Remove it when a real server is ready to receive requests. HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, { dataEncapsulation: false }), RouterModule ], declarations: [ MainLayoutComponent, NavbarComponent, ToolbarComponent ], exports: [ MainLayoutComponent ], providers: [ Logger, ToastService ] }) export class CoreModule { /* make sure CoreModule is imported only by one NgModule the AppModule */ constructor(@Optional() @SkipSelf() parentModule: CoreModule) { throwIfAlreadyLoaded(parentModule, 'CoreModule'); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48

   import { NgModule, Optional, SkipSelf } from '@angular/core'; import { CommonModule } from '@angular/common'; import { HttpClientModule } from '@angular/common/http'; import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api' import { RouterModule } from '@angular/router';   import { MaterialModule } from '@app/material/material.module';   import { InMemoryDataService } from './database/in-memory-data.service'; import { Logger } from './logger/logger.service'; import { MainLayoutComponent } from './main-layout/main-layout.component'; import { NavbarComponent } from './navbar/navbar.component'; import { throwIfAlreadyLoaded } from './module-import-guard'; import { ToastService } from './toast/toast.service'; import { ToolbarComponent } from './toolbar/toolbar.component';     @NgModule({     imports: [         CommonModule,         MaterialModule,         HttpClientModule,         // The HttpClientInMemoryWebApiModule module intercepts HTTP requests         // and returns simulated server responses.         // Remove it when a real server is ready to receive requests.         HttpClientInMemoryWebApiModule.forRoot(InMemoryDataService, { dataEncapsulation: false }),         RouterModule     ],     declarations: [         MainLayoutComponent,         NavbarComponent,         ToolbarComponent     ],     exports: [         MainLayoutComponent     ],     providers: [         Logger,         ToastService     ] })   export class CoreModule {     /* make sure CoreModule is imported only by one NgModule the AppModule */     constructor(@Optional() @SkipSelf() parentModule: CoreModule) {         throwIfAlreadyLoaded(parentModule, 'CoreModule');     } }

4. Lines 19 – 28 import a list of modules (CommonModule, MaterialModule, HttpClientModule, HttpClientInMemoryWebApiModule, RouterModule) whose exported components, directives, or pipes are referenced by the components declared in the CoreModule.

5. Lines 29 – 33 declare a list of components (MainLayoutComponent, NavbarComponent, ToolbarComponent) that belong to the CoreModule.

6. Lines 34 – 36 export MainLayoutComponent public so that other module’s component templates can use it.

7. Lines 37 – 40 register a list of services (Logger, ToastService) so that the same instance of these services are available to all parts of the application.

8. Line 43 exports the CoreModule so that the AppModule can import it.

Task 10: Create the Barrel

1. Add the barrel named index.ts file to the core folder.

2. Replace the code in the file with the following:

   JavaScript

   export { MainLayoutComponent } from './main-layout/main-layout.component'; export { Logger } from './logger/logger.service'; export { ToastService } from './toast/toast.service';

   1 2 3

   export { MainLayoutComponent } from './main-layout/main-layout.component'; export { Logger }       from './logger/logger.service'; export { ToastService } from './toast/toast.service';

   The index.ts re-exports MainLayoutComponent, Logger and ToastService of CoreModule to simplify the @import statement of these entities.

Task 11: Update the App Module

1. Open the named app-module.ts file in the root folder.

2. Replace the code in the file with the following:

   JavaScript

   import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { CoreModule } from './core/core.module'; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, AppRoutingModule, CoreModule ], declarations: [ AppComponent ], providers: [], bootstrap: [ AppComponent ] }) export class AppModule { }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

   import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { NgModule } from '@angular/core';   import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { CoreModule } from './core/core.module';   @NgModule({     imports: [         BrowserModule,         BrowserAnimationsModule,         AppRoutingModule,         CoreModule     ],     declarations: [         AppComponent     ],     providers: [],     bootstrap: [         AppComponent     ] })   export class AppModule { }

3. Lines 10 – 15 import the following supporting modules whose exported components, directives, or pipes are referenced by the component declared in the AppModule.

   • BrowserModule: provides critical services that are essential to launch and run our app in the browser
   • BrowserAnimationsModule: provides the animation capabilities
   • AppRoutingModule: is a routing module which provides the application-wide configured services with routes in the root module
   • CoreModule: provides singleton services, global components, and core functionalities

4. Lines 16 – 18 declare AppComponent that belongs to the AppModule.

5. Lines 20 – 22 bootstrap the root component named AppComponent when Angular starts the application.

6. Line 25 exports the AppModule so that the main.ts file can import it.

Task 12. Build and Serve the Application

1. Run the following CLI command to start the server, launch the application, and automatically open your browser to http://localhost:4200:
        ng serve -o

2. If there are errors, fix them before moving on to the next tutorial. Otherwise, you should still see the same screen as follows:

   

3. Press the following keys to stop the server (on Mac):
        control + c

In the next tutorial, we will build the Shared Module using Angular 6.

The source code for this tutorial series is published on GitHub. Demo application is hosted in Microsoft Azure.

References

• QuickStart
• The official Angular Style Guide
• Angular’s Routing & Navigation
• Angular’s Lazy Loading Feature Modules
• CLI Command Reference
• 6 Best Practices & Pro Tips when using Angular CLI by Tomas Trajan
• Barrel files: to use or not to use ? by Adrian Fâciu
• A Comprehensive Guide to Angular onPush Change Detection Strategy by Netanel Basal