Angular Material Masterclass

28 min readNov 11, 2018

Hello. My name is Aaron Ma. I have created my own company called Firebolt, Inc. My company and I are based in Silicon-Valley. Be sure to check out our headquarter’s.

Your Instructor’s Image:

First, we will create a new Angular app.

$ ng new my-app — styles=scss

Now, cd into our app.

$ cd my-app

Install some libraries.

NPM Users:

npm install @angular/cdk @angular/animations @angular/material hammerjs

Yarn Users:

yarn add @angular/cdk @angular/animations @angular/material hammerjs

Now, open up your IDE, and modify app.module.ts as shown:

import { BrowserModule } from ‘@angular/platform-browser’;import { NgModule, NO_ERRORS_SCHEMA } from ‘@angular/core’;import {BrowserAnimationsModule} from ‘@angular/platform-browser/animations’;import {MatAutocompleteModule,MatButtonModule,MatButtonToggleModule,MatCardModule,MatCheckboxModule,MatChipsModule,MatDatepickerModule,MatDialogModule,MatDividerModule,MatExpansionModule,MatGridListModule,MatIconModule,MatInputModule,MatListModule,MatMenuModule,MatNativeDateModule,MatPaginatorModule,MatProgressBarModule,MatProgressSpinnerModule,MatRadioModule,MatRippleModule,MatSelectModule,MatSidenavModule,MatSliderModule,MatSlideToggleModule,MatSnackBarModule,MatSortModule,MatStepperModule,MatTableModule,MatTabsModule,MatToolbarModule,MatTooltipModule,

],

schemas: [ NO_ERRORS_SCHEMA ] // prevent our app from generating errors

})

export class AppModule {}

Now, let’s serve our Angular app.

$ ng serve -o

Look, theres no errors! Congrats for setting up our app.

In our terminal, let’s create some components, folders and Angular services.

$ ng g c main-content

$ ng g c new-contact-dialog

$ ng g c notes

$ ng g c sidenav

$ ng g c toolbar

$ ng g s services/user

Great job! 👍🏻

Here’s how our app structure should look like:

Let’s build the services/user.service.ts first.

import { Injectable } from ‘@angular/core’;

import { User } from ‘../models/user’;

import { HttpClient } from ‘@angular/common/http’;

import { BehaviorSubject } from ‘rxjs/BehaviorSubject’;

import { Observable } from ‘rxjs/Observable’;

@Injectable()

export class UserService {

private _users: BehaviorSubject<User[]>;

private dataStore: {

users: User[];

};

constructor(private http: HttpClient) {

this.dataStore = { users: [] };

this._users = new BehaviorSubject<User[]>([]);

}

get users(): Observable<User[]> {

return this._users.asObservable();}addUser(user: User): Promise<User> {return new Promise((resolver, reject) => {user.id = this.dataStore.users.length + 1;this.dataStore.users.push(user);this._users.next(Object.assign({}, this.dataStore).users);resolver(user);});}userById(id: number) {return this.dataStore.users.find(x => x.id == id);}loadAll() {const usersUrl = ‘https://angular-material-api.azurewebsites.net/users';return this.http.get<User[]>(usersUrl).subscribe(data => {this.dataStore.users = data;this._users.next(Object.assign({}, this.dataStore).users);},error => {console.error(‘Failed To Fetch Users’);});}}

Do not run this code! It doesn’t work! We need to create a models/ folder.

In the models/ folder, create a Note.ts file:

export class Note {id: number;title: string;date: Date;}

Then, create a User.ts file:

import { Note } from ‘./Note’;export class User {id: number;birthDate: Date;name: string;avatar: string;bio: string;notes: Note[] = [];}

Now, open up user.service.ts. Remember, don’t run the code yet.

import { Injectable } from ‘@angular/core’;import { User } from ‘../models/user’;import { HttpClient } from ‘@angular/common/http’;import { BehaviorSubject } from ‘rxjs/BehaviorSubject’;import { Observable } from ‘rxjs/Observable’;@Injectable()export class UserService {private _users: BehaviorSubject<User[]>;private dataStore: {users: User[];};constructor(private http: HttpClient) {this.dataStore = { users: [] };this._users = new BehaviorSubject<User[]>([]);}get users(): Observable<User[]> {return this._users.asObservable();}addUser(user: User): Promise<User> {return new Promise((resolver, reject) => {user.id = this.dataStore.users.length + 1;this.dataStore.users.push(user);this._users.next(Object.assign({}, this.dataStore).users);resolver(user);});}userById(id: number) {return this.dataStore.users.find(x => x.id == id);}loadAll() {const usersUrl = ‘https://angular-material-api.azurewebsites.net/users';return this.http.get<User[]>(usersUrl).subscribe(data => {this.dataStore.users = data;this._users.next(Object.assign({}, this.dataStore).users);},error => {console.error(‘Failed To Fetch Users’);});}}

Now, here’s the time to see our new app in action. But, wait. We need components to show and some styling. So, in styles.scss:

@import “~@angular/material/theming”;@include mat-core();$candy-app-primary: mat-palette($mat-indigo);$candy-app-accent: mat-palette($mat-pink, A200, A100, A400);$candy-app-warn: mat-palette($mat-red);$candy-app-theme: mat-light-theme($candy-app-primary,$candy-app-accent,$candy-app-warn);@include angular-material-theme($candy-app-theme);.dark-theme {$primary-dark: mat-palette($mat-pink, 700);$accent-dark: mat-palette($mat-green);$warn-dark: mat-palette($mat-red);$theme-dark: mat-dark-theme($primary-dark,$accent-dark,$warn-dark);@include angular-material-theme($theme-dark);}body {margin: 0;}

And, for our avatars, create a new file in assets/ called avatar.svg:

<?xml version=”1.0" encoding=”utf-8"?><svg width=”512" height=”512" viewBox=”0 0 512 512" xmlns=”http://www.w3.org/2000/svg"xmlns:xlink=”http://www.w3.org/1999/xlink"><defs><svg viewBox=”0 0 128 128" height=”100%” width=”100%” pointer-events=”none” display=”block” id=”svg-1" ><path fill=”#FF8A80" d=”M0 0h128v128H0z”/><path fill=”#FFE0B2"d=”M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3–4.7 26.7–11.6l.2.1c-17–13.3–12.9–23.4–8.5–28.6 1.3–1.2 2.8–2.5 4.4–3.9l13.1–11c1.5–1.2 2.6–3 2.9–5.1.6–4.4–2.5–8.4–6.9–9.1–1.5-.2–3 0–4.3.6-.3–1.3-.4–2.7–1.6–3.5–1.4-.9–2.8–1.7–4.2–2.5–7.1–3.9–14.9–6.6–23–7.9–5.4-.9–11–1.2–16.1.7–3.3 1.2–6.1 3.2–8.7 5.6–1.3 1.2–2.5 2.4–3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6–1-.3–2.1-.4–3.2-.2–4.4.6–7.5 4.7–6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4–5.4 18.4-.5.6–1.1 1–1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1–1.2 13–3.4 5.6–3.1 9.6–8.9 10.5–15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6–1.6 1.6-.9 0–1.6-.7–1.6–1.6-.1-.9.7–1.6 1.6–1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6–1.6 1.6-.9 0–1.6-.7–1.6–1.6-.1-.9.7–1.6 1.6–1.6z”/><path fill=”#E0F7FA”d=”M105.3 106.1c-.9–1.3–1.3–1.9–1.3–1.9l-.2-.3c-.6-.9–1.2–1.7–1.9–2.4–3.2–3.5–7.3–5.4–11.4–5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9–16 11.3–26.7 11.6–11.2-.3–21.1–5.1–27.5–12.6-.1.2-.2.4-.2.5–3.1.9–6 2.7–8.4 5.4l-.2.2s-.5.6–1.5 1.7c-.9 1.1–2.2 2.6–3.7 4.5–3.1 3.9–7.2 9.5–11.7 16.6-.9 1.4–1.7 2.8–2.6 4.3h109.6c-3.4–7.1–6.5–12.8–8.9–16.9–1.5–2.2–2.6–3.8–3.3–5z”/><circle fill=”#444" cx=”76.3" cy=”47.5" r=”2"/><circle fill=”#444" cx=”50.7" cy=”47.6" r=”2"/><path fill=”#444"d=”M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4–2.2–6.9–6.8–12.6–12.6–16.4C95.1 20.9 92 10 92 10c-1.4 5.5–11.1 4.4–11.1 4.4H62.1c-1.7-.1–3.4 0–5.2.3–12.8 1.8–22.6 11.1–25.7 22.9 10.6–1.9 15.3–7.6 16.9–10.2z”/></svg><svg viewBox=”0 0 128 128" height=”100%” width=”100%” pointer-events=”none” display=”block” id=”svg-10" ><path fill=”#FFCC80" d=”M41.6 123.8s0 .1-.1.1l.3-.4c-.1.2-.1.2-.2.3z”/><path fill=”#8C9EFF” d=”M0 0h128v128H0z”/><path fill=”#C2C2C2"d=”M34.8 79.5c-2.5–3.4–5.9–6.4–6.9–10.3v-.1l-.6-.5c-.3–1.2.6–2 .5–3l-2.4–1h-6.9s0 17 17.4 17.3c-.9-.9-.7–1.8–1.1–2.4z”/><path fill=”#CFD8DC”d=”M21.9 64.2l-.1-.3c0-.1 0-.2-.1-.4v-1l.1-.3c.1-.1.1-.2.1-.3.1-.1.1-.2.1-.2.2-.4.1-.8-.2–1.1-.4-.4–1-.4–1.3 0l-.2.2-.2.2c-.1.1-.2.2-.3.4l-.3.6-.3.6c-.1.2-.2.4-.2.7 0 .2-.1.5-.1.8v.5h3c.2-.2.1-.3 0-.4z”/><path fill=”#eee”d=”M116.5 65.2c.1.1.2.1.2.2 0-.1-.1-.2-.2-.2zm8.2 6.1l.6.3c-.3-.1-.4-.2-.6-.3zm1.7 1l.6.3c-.2 0-.4-.1-.6-.3zm-3.4–2.1l.5.3c-.2 0-.4-.2-.5-.3zm-8–6.5zm-.1 64.1c-12–17.2–7.6–52–3.1–67.6v-.1c-3.5–4.2–7.8–11.7–10.2–18.7–1.7–5–4–8.8–6.4–11.8l-1.6–2–10.7 11.8c-1.5 2.1–3.3 1.8–4.1-.6l-7.1–17.3c-.3-.9-.3–1.9 0–2.7.3–1.1-.1–2.1.7–3l-2-.1c-1.3 0–2.5.1–3.7.3–1.7-.3–3.4-.5–5.1-.5–11.9 0–21.9 8.1–24.8 19.2-.5 1.8-.7 3.7-.8 5.6–1.2 3.6–4.2 7.7–11.5 8.4 1.3.4 2.2 1.9 2 3.6l-.5 2.8c-.3 2–1.2 2.4–2.2.9l1.6 8.6.2.9c.1 1.1.3 2.2.6 3.4 1 4 3.2 8.2 7.8 10.9.3.6 1 1.3 2 2.1 8.2 6.7 36 20.7 27.8 46.1h51.3c0-.1-.1-.1-.2-.2zM34.5 59.3c.5 0 1 .4 1 1 0 .5-.4 1–1 1-.5 0–1-.4–1–1s.4–1 1–1zm7.4 3.9c.5 0 1 .4 1 1 0 .5-.4 1–1 1-.5 0–1-.4–1–1 0-.5.5–1 1–1zm-1–8.5c-.5 0–1-.4–1–1 0-.5.4–1 1–1 .5 0 1 .4 1 1s-.5 1–1 1zm3.9–10.9c-.9 0–1.6-.7–1.6–1.6 0-.9.7–1.6 1.6–1.6.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6–1.6 1.6zm73.3 22.7c.1.1.2.2.4.3-.2-.1-.3-.2-.4-.3zm3.2 2.6l.5.3-.5-.3zm-1.6–1.3l.4.3c-.1 0-.3-.1-.4-.3z”/><path fill=”#C2C2C2"d=”M114.9 127.8l.2.2H128V73.2l-1-.6-.6-.3–1.2-.7-.6-.3–1.2-.7-.5-.3–1.2-.8-.5-.3–1.2-.9-.4-.3–1.2–1c-.1-.1-.2-.2-.4-.3l-1.3–1.2c-.1-.1-.2-.1-.2-.2l-1.5–1.5c-1.5–1.6–3–3.3–4.4–5.1–4.6 15.4–13 52.7 4.3 69.1z”/><path fill=”#646464"d=”M26 55.1l.4–2.8c.2–1.8-.6–3.2–2–3.6-.3-.1-.7-.2–1.1-.1–2 .1–2.7 1.9–1.6 3.8l1.8 3.3c.1.2.2.3.3.4 1 1.3 1.9 1 2.2–1z”/><circle fill=”#444" cx=”44.8" cy=”42.2" r=”2"/><circle fill=”#CFD8DC” cx=”34.5" cy=”60.3" r=”1"/><circle fill=”#CFD8DC” cx=”40.9" cy=”53.7" r=”1"/><circle fill=”#CFD8DC” cx=”41.9" cy=”64.2" r=”1"/><path fill=”#646464"d=”M70.7 18.8c-.3.8-.3 1.8 0 2.7l8.1 19.3c.8 2.5 2.6 2.7 4.1.6l12.3–11.8 1.4–1.3c.3-.4.5-.9.6–1.3.4–1.2.3–2.4-.1–3.6–1.1–4.3–5.6–8.9–11.2–10.3–5.6–1.4–10.9-.2–13.6 2.7-.8.8–1.3 1.8–1.6 3z”/></svg><svg viewBox=”0 0 128 128" height=”100%” width=”100%” pointer-events=”none” display=”block” id=”svg-11" ><path fill=”#FFCC80" d=”M41.6 123.8s0 .1-.1.1l.3-.4c-.1.2-.1.2-.2.3z”/><path fill=”#FFFF8D” d=”M0 0h128v128H0z”/><path fill=”#F4B400"d=”M110.3 91.4l-.5-.5c.1.2.3.4.5.5zm-4.4–4.5l.4.5c-.1-.2-.3-.4-.4-.5zm9.8 9.5c.2.2.4.4.7.6-.3-.2-.5-.4-.7-.6zM104.3 85c.2.2.3.4.5.5-.2-.1-.4-.3-.5-.5zm3.7 4.1zm16.9 14l.9.6c-.3-.3-.6-.4-.9-.6zm-28.5–29l.1.2c-.1 0-.1-.1-.1-.2zm15.2 18.6c.2.2.4.4.7.6l-.7-.6zm10 8.2l.9.6-.9-.6zm-18.8–17.7l.4.5c-.1-.1-.3-.3-.4-.5zm-1.4–1.7c.1.1.1.2.2.2-.1 0-.1-.1-.2-.2zm12.2 13l.7.6c-.2-.1-.5-.4-.7-.6zm-15–16.8c.1.1.1.2.2.2l-.2-.2zm-1.2–1.8l.2.3c0-.1-.1-.2-.2-.3zm28.4 27.7l-.9-.6–2.4–1.5-.9-.6c-1-.7–2.1–1.4–3.1–2.2l-2.2–1.8c-.2-.2-.4-.4-.7-.6-.5-.4–1-.8–1.4–1.2l-.7-.6–1.3–1.2-.7-.6c-.5-.4-.9-.9–1.3–1.3l-.5-.5–1.8–1.8c-.6-.6–1.1–1.2–1.6–1.8l-.4-.5–1.2–1.3c-.2-.2-.3-.4-.5-.5l-1.1–1.3-.4-.5–1.2–1.5c-.1-.1-.1-.2-.2-.2-.9–1.2–1.8–2.4–2.6–3.6-.1-.1-.1-.2-.2-.2l-1–1.5-.2-.3c-.3-.5-.6–1–1–1.5l-.1-.2c-1.1–1.8–2–3.5–2.9–5.2–3.1–6–4.8–11.4–5.7–15.9-.2-.9-.3–1.7-.4–2.6L85 13l-8 10.2c-3.7–2.6–8.2–4.2–13.1–4.2s-9.4 1.5–13.1 4.1L42.7 13l-1.8 29–7.7 71.8h.2c-.1 1-.2 2-.2 3 0 4 .8 7.7 2.1 11.2H128v-23.1c-.7-.4–1.5-.8–2.2–1.3zM55 38.4c-.9 0–1.6-.7–1.6–1.6 0-.9.7–1.6 1.6–1.6.9 0 1.6.7 1.6 1.6 0 .8-.7 1.6–1.6 1.6zm17.9 0c-.9 0–1.6-.7–1.6–1.6 0-.9.7–1.6 1.6–1.6.9 0 1.6.7 1.6 1.6 0 .8-.7 1.6–1.6 1.6z”/><circle fill=”#444" cx=”72.9" cy=”36.7" r=”2"/>

<path fill=”#FF5722"

d=”M92.5 102.7c8.3 11.3 23.6 14.4 35.5 7.8v-5.6l-2.2–1.3-.9-.6–2.4–1.5-.9-.6c-1-.7–2.1–1.4–3.1–2.2l-2.2–1.8c-.2-.2-.4-.4-.7-.6-.5-.4–1-.8–1.4–1.2l-.7-.6–1.3–1.2-.7-.6c-.5-.4-.9-.9–1.3–1.3l-.5-.5–1.8–1.8c-.6-.6–1.1–1.2–1.6–1.8l-.4-.5–1.2–1.3c-.2-.2-.3-.4-.5-.5l-1.1–1.3-.4-.5–1.2–1.5c-.1-.1-.1-.2-.2-.2-.9–1.2–1.8–2.4–2.6–3.6-.1-.1-.1-.2-.2-.2l-1–1.5-.2-.3c-.3-.5-.6–1–1–1.5l-.1-.2c-1.1–1.8–2–3.5–2.9–5.2–7.7 9.4–8.4 23.4-.8 33.7z”/>

</svg>

<path fill=”#444"

d=”M50.4 75.7c-1.6–1.6–3.2–2.9–4.7–4-.9-.6–1–1.7–1.7–2.2–1.8–1–3.2–5.9–5.3–3.4l-.5.8-.4-.9c-1.3–1.2–1-.4–1.3–2.3-.5–4.2 1.2–7.2 5.1–7.8 1-.1 2-.1 2.9.2 9.5–1.8 13.7–7.4 15.2–10 4 5.7 14.3 11.4 38.3 7.8 2.8–4.7 4.5–10.2 4.5–16C102.4 20.8 88.6 7 71.6 7c-6.7 0–12.8 2.1–17.9 5.7L27.9 31C16.3 36.6 8.3 48.5 8.3 62.2c0 19.1 15.5 34.6 34.6 34.6 4.6 0 9-.9 13–2.5.2–8.4–1.4–14.5–5.5–18.6zm-5.9–21.6z”/>

<path fill=”#8D6E63"

d=”M73.7 122c6.1.5 13.4-.3 22–3.5-.1-.7-.3–1.4-.5–2.1-.3–1.3–3.8–21.4–4–28.1-.1–7.3.8–11.9 2–14.7h8.7l-2.5–10.1c-.2–2.4-.4–4.7-.7–6.6-.2–1.8-.3–2.3-.8–3.9–24 3.6–34.2–3.7–38.2–9.4–1.4 2.5–5.7 8.8–15.3 10.5-.9-.3–1.9-.3–2.9-.2–3.9.6–6.7 4.5–6.1 8.8.3 2 1.2 3.6 2.5 4.8.2.1 1.5.6 3.3 1.7.7.4 1.6.9 2.4 1.6 1.5 1.1 3.1 2.4 4.7 4 4 4.1 7.6 10.2 7.4 18.5-.1 4.9–1.6 10.6–5.1 17.2.1 0 7.3 10.2 23.1 11.5zM44.5 54.1z”/>

<path fill=”#0097A7"

d=”M73.7 122c-15.9–1.3–23–11.5–23–11.5–2.1 4–5.1 8.4–8.9 13.1l-.3.4c-.5.6–1.1 1.3–1.7 2-.5.6–1 1.3–1.6 2.1h59.7c-.7–3.2–1.5–6.4–2.1–9.5–8.7 3.1–16 3.9–22.1 3.4z”/>

</svg>

</g>

<path fill=”#444"

d=”M73 18.7c-4.8 0–9.7.8–14 2.3-.1.1-.2.2-.4.3l-7.3 4.6c-.6.4–1.4.4–2 .1-.3-.2-.6-.4-.8-.7l-.7–1.1c-.6–1-.3–2.2.6–2.8l7.3–4.6c.4-.2.8-.3 1.2-.3–5.5–3–23.7–10.7–33.7 10.7–11.8 25.4 11 50.2–14.4 62.6 0 0 26.2 13.7 40.9–24.8 3.7 3.2 8.8 5.8 16 7.4-.6–5.6.8–9.8–2.1–12.8–1.3–1.4–2.7–1.5–4–2.4-.7-.5–1.4-.9–2–1.3–1.5-.9–2.6–1.3–2.8–1.4–1.1–1–1.9–2.4–2.1–4.1-.5–3.6–2.2–6.9 1.1–7.4.8-.1 1.6-.1 2.4.2 8–1.5 11.6–6.7 12.8–8.9 3.4 4.8 11.7 9.8 31.9 6.8.3 1.1.6 1.2.8 2.4l.5–1.3c-.1–13–13.2–23.5–29.2–23.5zM56.1 43.2z”/>

<path fill=”#FFE0B2"

d=”M61.4 89.7s6 8.6 19.4 9.7c5.1.4 11.3-.3 18.6–2.9-.1-.6-.3–1.2-.4–1.7-.2–1.1–3.2–18–3.4–23.6-.2–6.2.6–10 1.6–12.4h7.3l-2.1–8.5c-.1–2-.4–3.9-.6–5.6 0-.3-.1-.7-.2–1-.2–1.1-.4–2.3-.8–3.4–20.2 3–28.5–2–31.9–6.8–1.2 2.1–4.8 7.4–12.8 8.9-.8-.2–1.6-.3–2.4-.2–3.3.5–5.6 3.8–5.1 7.4.2 1.7 1 3.1 2.1 4.1.2.1 1.3.5 2.8 1.4.6.4 1.3.8 2 1.3 1.3.9 2.6 2 4 3.4 2.9 3 5.6 7.2 6.1 12.8.5 4.5-.6 10.2–4.2 17.1zm27.5–41.2c.7 0 1.3.6 1.3 1.3s-.6 1.3–1.3 1.3–1.3-.6–1.3–1.3.6–1.3 1.3–1.3zm-32.8–5.3c.1-.1 0-.1 0 0z”/>

<path fill=”#FF5722"

d=”M80.8 99.3c-13.3–1.1–19.4–9.7–19.4–9.7–1.8 3.4–4.3 7.1–7.5 11l-.3.3c-.4.5-.9 1.1–1.4 1.7-.7.9–1.6 2.1–2.8 3.7–2.3 3.2–5.4 7.8–8.8 13.5–1.4 2.4–2.9 5.1–4.4 8 0 0 0 .1-.1.1h71.3c-.6–1.6–1.3–3.2–1.7–4.8–2.2–8.6–4.6–17.9–6.5–26.8–7.2 2.8–13.3 3.5–18.4 3z”/>

<path fill=”#00BFA5"

d=”M55.7 16.7l-7.3 4.6c-1 .6–1.3 1.9-.6 2.8l.7 1.1c.2.3.5.6.8.7.6.3 1.4.3 2-.1l7.3–4.6.4-.3c.7-.7.8–1.7.3–2.5l-.7–1.1c-.4-.6–1-.9–1.6–1-.5 0–1 .1–1.3.4z”/>

</svg>

<path d=”M92.9 32.8l-.2.1c.1 0 .2 0 .2-.1zm-1.2.5l-.7.1.7-.1zm.6-.2l-.3.1.3-.1zm-52 .3c-.2 0-.5 0-.7-.1.3 0 .5.1.7.1zm-.9-.2l-.5-.1.5.1zm-.7-.2c-.2-.1-.4-.2-.5-.3.1.1.3.2.5.3z”

fill=”none”/>

<path fill=”#FFE0B2"

d=”M31.2 47.2zM45.8 93c5.8 5.5 13.6 9.1 22.3 9.3 2.8-.1 5.4-.5 8–1.2l.8–3.8c4.3–19.3 9.7–37.4 15–52.9h6.9L94 36.2c-.2–1.2-.4–2.5-.7–3.6l-.4.3-.2.1-.4.2-.3.1-.3.1-.7.1H40.3c-.2 0-.5 0-.7-.1-.1 0-.1 0-.2-.1l-.5-.1-.2-.1c-.2-.1-.4-.2-.5-.3 0 0-.1 0-.1-.1-.1.2-.1.4-.1.7–1-.3–2-.4–3-.3–4.1.6–6.9 4.7–6.3 9.1.3 2 1.2 3.8 2.6 5 .3.1 1.6.7 3.4 1.7.8.4 1.6 1 2.5 1.6 1.5 1.1 3.2 2.5 4.9 4.1 0 0 16.3 12.3 3.4 38 .1.2.2.3.3.4zm34.1–51.9c.8 0 1.5.7 1.5 1.6 0 .9-.7 1.6–1.5 1.6s-1.5-.7–1.5–1.6.6–1.6 1.5–1.6z”/>

<path fill=”#2A56C6"

d=”M68.1 102.3c-8.7-.2–16.5–3.8–22.3–9.3-.1-.1-.2-.2-.4-.3–3-.2–7.6.2–10.8.6–4.6.6–9.6 1.3–15 2.4–3.6.7–8.1 1.9–19.7 5.3v27h71.4c1.3–9.1 2.9–18.1 4.7–26.9–2.5.7–5.1 1.1–7.9 1.2z”/>

<path fill=”#E65100"

d=”M38.7 33l.2.1c.2.1.3.1.5.1.1 0 .1 0 .2.1l.7.1H91c.2 0 .5 0 .7-.1l.3-.1.3-.1c.1 0 .3-.1.4-.2l.2-.1.4-.3c1-.7 1.6–1.9 1.6–3.2v-4.8c0–2.2–1.8–4–4–4H40.4c-2.2 0–4 1.8–4 4v4.8c0 1.4.7 2.6 1.8 3.3 0 0 .1 0 .1.1s.2.2.4.3z”/>

</svg>

<path fill=”#5D4037"

d=”M87.3 11.7c-7.6 0–14.1 4.9–16.4 11.7–2.8–1.6–5.9–2.7–9.1–3.1–13.9–2.1–26.9 7.1–31.1 21.1 5 .8 9.5 3.1 13.4 3.1 1.4-.6 3-.9 4.6-.9 1.1 0 2.2.2 3.3.5 10–1.3 15.2–5.2 17.9–9 .3.5.6 1 1 1.6v.1c2.1 3.1 6.6 7.7 14.7 9.2.9-.3 1.9-.4 3-.2 1.5.2 2.8–1.1 3.8-.1 7–2.2 12.2–8.8 12.2–16.5 0–9.7–7.8–17.5–17.3–17.5z”/>

<path fill=”#FFCC80"

d=”M48.6 63.8c5.6 0 10.1–4.5 10.1–10.1s-4.5–10.1–10.1–10.1–10.1 4.5–10.1 10.1c.1 5.5 4.6 10.1 10.1 10.1zm-1.7–10.5c0 .9-.7 1.6–1.6 1.6-.9 0–1.6-.7–1.6–1.6 0-.9.7–1.6 1.6–1.6.9-.1 1.6.7 1.6 1.6zm38.7–7.4z”/>

<path fill=”#F9A825"

d=”M35.6 117.3c0 2.5 2.1 4.6 4.6 4.6s4.6–2.1 4.6–4.6c0–1.7-.9–3.2–2.3–4-.8-.2–1.8-.3–2.7-.6–2.3.3–4.2 2.2–4.2 4.6z”/>

<path fill=”#F9A825"

d=”M83.4 117.3c0 2.5 2.1 4.6 4.6 4.6 1.5 0 2.8-.7 3.7–1.8l-.7-.9-.6-.8c-.6-.7–1.3–1.5–1.8–2.1l-.3-.4c-.4-.5-.8-.9–1.2–1.5-.3-.4-.6-.8-.9–1.3–1.7.8–2.8 2.4–2.8 4.2z”/>

<path fill=”#FFEE58"

d=”M91.6 119.8c-.8 1–2.1 1.7–3.5 1.7–2.4 0–4.4–2–4.4–4.4 0–1.8 1–3.3 2.5–4–3–3.9–5.3–7.5–7.2–11 .2.1–7.3 10.6–23.7 12–3.8.3–8 .1–12.8-.8 1.3.8 2.2 2.2 2.2 3.8 0 2.4–2 4.4–4.4 4.4s-4.4–2–4.4–4.4c0–2.3 1.8–4.2 4–4.4–2.4-.6–4.8–1.3–7.4–2.2–1.2 5.7–2.6 11.6–4.1 17.5h69c-1.4–2–2.6–3.8–3.7–5.3m-29.4–1.2c-2.4 0–4.4–2–4.4–4.4s2–4.4 4.4–4.4 4.4 2 4.4 4.4c0 2.4–2 4.4–4.4 4.4z”/>

<path fill=”#FFCC80"

d=”M92.4 45.6c-1–1–2.4–1.7–3.8–1.9–1-.2–2-.1–3 .2–8.1–1.5–12.6–6.1–14.7–9.2-.5-.7-.8–1.2–1.1–1.7–2.7 3.8–7.9 7.7–17.9 9l.9.3–9.4.4.6-.3c-3.9 0–8.3-.4–13.4–1.1-.5 1.7-.9 3.5–1.2 5.3-.2 1.8-.5 3.8-.6 6l-.3 2–2.3 9.4h9c1.2 3 2.1 7.7 1.9 15.3-.2 6.9–3.9 27.7–4.2 29-.1.7-.3 1.4-.5 2.1 2.6.9 5 2 7.3 2.5l2.7.5c4.8.9 9.2 1.4 13 1.1 16.4–1.3 24–12 24–12–9.8–18.4–4.6–30.7 2.1–37.5 1.6–1.7 3.3–3 4.9–4.1.9-.6 1.7–1.2 2.5–1.6 1.8–1.1 3.2–1.6 3.4–1.7 1.3–1.2 2.3–3 2.6–5 .3–2.6-.7–5.3–2.5–7zm-32.9 2.7c.5 1 .8 2 1 3.1l-1–3.1z”/>

<path fill=”#DB4437"

d=”M36.6 54.7c.5 6.2 5.7 11.1 12 11.1 6.7 0 12.1–5.4 12.1–12.1 0–5.5–3.7–10.2–8.8–11.6–1-.3–2.1-.5–3.3-.5–1.6 0–3.2.3–4.6.9–4.1 1.7–7.1 5.6–7.4 10.2h-7.7l-.1.9-.3 1.1h8.1zm12–11.1c5.6 0 10.1 4.5 10.1 10.1s-4.5 10.1–10.1 10.1–10.1–4.5–10.1–10.1c.1–5.6 4.6–10.1 10.1–10.1z”/>

</svg>

<path fill=”#444"

d=”M58.4 24c4.2 5.9 23.9 10.2 38.9 4.6–4.2–14–17.1–23.2–31.1–21.1–11.7 1.8–20.8 11.2–23.7 22.9 7 3.2 14.5–3.8 15.9–6.4z”/>

<path fill=”#689F38"

d=”M72.7 101.3C56.3 100 48.8 89.4 48.8 89.4c-2.2 4.2–5.2 8.7–9.2 13.5l-.3.4–1.7 2c-.9 1.1–2 2.6–3.4 4.5–2.8 3.9–6.6 9.5–10.8 16.6l-.8 1.4h80.1c-2.5–9.8–5.1–20.3–7.3–30.2–8.9 3.4–16.5 4.3–22.7 3.7z”/>

<path fill=”#FFCC80"

d=”M101.8 51.3l-2.6–10.4c-.2–2.5-.5–4.9-.7–6.9-.2–1.9-.6–3.6–1.2–5.3–24.8 3.7–35–2.5–39.1–8.4–1.5 2.6–5.8 8.4–15.6 10.2-.1.2-.1.5-.1.7-.9-.3–1.9-.4–3-.2–4.1.6–6.9 4.7–6.3 9.1.3 2 1.2 3.8 2.6 5 .3.1 1.6.7 3.4 1.7.8.4 1.6 1 2.5 1.6 1.5 1.1 3.2 2.5 4.9 4.1 6.6 6.8 12.1 18.6 2.4 37 0 0 7.4 10.6 23.8 11.9 6.3.5 13.8-.3 22.8–3.6l-.5–2.1c-.3–1.4–4–22.1–4.2–29-.2–7.6.7–12.3 1.9–15.3h9zM81.1 40.5c0-.9.7–1.6 1.6–1.6.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6–1.6 1.6-.9.1–1.6-.7–1.6–1.6zm-41.7 62.8s0 .1-.1.1l.3-.4c0 .1-.1.2-.2.3z”/>

</svg>

<path fill=”#FFCC80"

d=”M70.1 122.5l.6-.1c6.1-.8 12–2.4 17.7–4.8 1.2-.5 2.4–1.1 3.2–2.1 1.3–1.7-.1–5.6-.5–7.7-.7–3.8–1.3–7.7–1.9–11.5-.7–4.5–1.5–9.1–1.6–13.7-.2–7.6.7–12.3 1.9–15.3h9l-2.6–10.4c-.2–2.4-.4–4.8-.7–6.8-.2–1.9-.6–3.6–1.2–5.3–14.9 2.2–24.5.9–30.7–1.8l-23.1 4.5-.7.1h-.7c-.4-.1-.9-.2–1.2-.4-.4 0-.9 0–1.4.1–4.1.6–6.9 4.7–6.3 9.1.3 2 1.2 3.8 2.6 5 .3.1 1.6.7 3.4 1.7.8.4 1.6 1 2.5 1.6 1.5 1.1 3.2 2.5 4.9 4.1 5.8 5.9 8.4 13.8 7.4 22-.6 4.7–2.2 9.4–4.4 13.6-.5 1–1 1.6–1.1 2.8-.1 1.1-.1 2.3.1 3.4.4 2.3 1.5 4.4 3 6.2 2.6 3.1 6.4 5 10.4 5.8 3.8.4 7.6.3 11.4-.1zm9.5–67.6c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6–1.6 1.6s-1.6-.7–1.6–1.6c-.1-.8.7–1.6 1.6–1.6zM128 97.7c-3.3 1.9–6.6 3.7–9.9 5.3–3.2 1.5–6.3 2.9–9.6 4.2-.9.4–2.1.5–2.9 1.1–1.1.8–1.9 2.5–2.3 3.7-.6 1.6-.6 3.4.3 4.8.8 1.2 2.1 2 3.5 2.6 5.9 2.9 12.2 5.1 18.6 6.5 1.4.3 2.3 1.8 2.4.1V97.9c-.1.1-.1-.1-.1-.2z”/>

<path fill=”#E65100"

d=”M38.9 48.4h.7c.2 0 .5 0 .7-.1l23.1–4.5 20.4–4 23.3–4.5c1.9-.4 3.2–2 2.9–3.6-.3–1.6–2.1–2.6–4.1–2.3l-19.6 3.8–1.3–6.8C83 15.5 70 8.7 55.9 11.5c-14 2.7–23.7 13.9–21.6 24.9h.1l1.7 9v.7c.2.8.7 1.4 1.4 1.9.5.1 1 .3 1.4.4z”/>

<path fill=”#689F38"

d=”M128 128v-1.8L106.3 108l-.4.2–2.9 1.3c-3 1.3–6 2.6–9.2 3.8l-1.4.5c-9 3.3–16.5 4.1–22.8 3.6–16.4–1.3–23.8–11.9–23.8–11.9–2.2 4.2–5.2 8.7–9.2 13.5l-.3.4–1.7 2c-.9 1.1–2 2.6–3.4 4.5-.4.6-.9 1.3–1.4 2l98.2.1z”/>

</svg>

<path fill=”#5D4037"

d=”M53.7 68.3c.9-.1 1.7-.3 2-.9.1-.2.2-.4.2-.6.2–1-.2–2-.5–3–1.2–3.2–2–6.4–2.2–9.8-.3–3.9.4–7.8 1–11.6l12.7–8.1c.8-.5 1.8–1.5 2.7–1.7.9-.3 2.4.6 3.3.8 1.3.4 2.6.6 4 .9 5.4.9 10.9.7 16.2-.6 1.3-.3 2.7–1.1 4–1.3-.3–2.1–1.5–4.3–2.5–6.1–1–1.9–2.2–3.7–3.6–5.3–2.7–3.2–6–5.8–9.8–7.5–3.3–1.5–6.8–2.4–10.4–2.5 0 0–50.8–8.1–42.4 56.4l12.8.5 8.7.3c.9-.1 2.5.2 3.8.1z”/>

<path d=”M59.5 25.7l-.3-.4c0 .2.1.3.3.4zm-1–1.2c-.2-.2-.3-.4-.4-.6.1.2.2.4.4.6zm.4.6l-.3-.4.3.4zm1.1 1.2l-.4-.4c.2.1.3.3.4.4zM46.3 56.2zm.5.4l.3.3-.3-.3zm-.2-.2l.2.2-.2-.2zm-.2-.2l.1.1-.1-.1zm14.3–29.3l-.4-.4c.1.1.2.3.4.4zm8.6 4.7l-1-.3c.3 0 .6.2 1 .3zm1.3.3c-.4-.1-.8-.2–1.1-.3.3.1.7.2 1.1.3zm-23.4 25l.4.4c-.2-.1-.3-.3-.4-.4zm27–24.2l-.9-.2c.3.1.6.2.9.2zm-12.8–5.2l-.5-.4c.1.1.3.2.5.4zm6.7 3.7c-.3-.1-.6-.2-.9-.4.2.1.6.2.9.4zm-5.9–3.1l-.6-.5.6.5zm3.7 2.2c-1.4-.6–2.6–1.3–3.6–2.1 1 .7 2.2 1.4 3.6 2.1zm1.1.4l-.9-.4c.2.2.5.3.9.4zm20.1 2.7h-.8.8zm-3.2 0h1.4–1.4zm-3.9 0l1.9.1c-.6 0–1.1 0–1.7-.1H80zm2 0h1.6H82zm6.1-.1c.3 0 .7 0 1-.1h-.2c-.2.1-.5.1-.8.1zm6.2-.6l-.7.1c1.2-.1 2.4-.3 3.6-.5l-2.2.3c-.2.1-.5.1-.7.1zm-3.4.4c-.3 0-.6 0-.8.1.9-.1 1.9-.2 2.9-.3l-.8.1c-.5 0-.9 0–1.3.1zM51.1 61.9c.2.3.4.6.5 1-.2-.4-.3-.7-.5–1zm-3.5–4.6c.8.8 1.8 1.9 2.8 3.5–1–1.5–2–2.7–2.8–3.5zm2.9 3.6l.6.9c-.3-.3-.5-.6-.6-.9zm1.2 2.1l.6 1.1c-.3-.4-.4-.8-.6–1.1zm26.5–29.8l-.9-.1c-.2 0-.3 0-.5-.1l-.9-.1h-.2c1.3.2 2.6.3 4 .4-.3 0-.6 0-.9-.1-.2.1-.4.1-.6 0zm-3.8-.4l1.1.2-.9-.1c-.1-.1-.2-.1-.2-.1zm-3.7-.8c.7.2 1.5.4 2.3.5l-.9-.2–1.4-.3zM52.2 64.1c.6 1.2 1.1 2.6 1.5 4.1-.4–1.5-.9–2.9–1.5–4.1z”

fill=”none”/>

<path fill=”#E65100"

d=”M101.3 128h.3c-2.4–9.5–4.8–19.4–6.8–28.7–7.6 2.7–39.3.6–45.1–5.1–2.5 4.9–6 10.3–10.8 16.2H97l4.3 17.6z”/>

<path fill=”#EE8100"

d=”M101.6 128c-1.5–5.8–3–11.8–4.3–17.7H38.9c-.9 1.1–2.1 2.2–3.1 3.3-.2.2-.3.4-.5.5–4 4.6–7.5 9.2–10.4 13.8h76.7z”/>

<path fill=”#FFE0B2"

d=”M72.4 103.8c5.9-.2 14.8–1.8 22.4–4.5-.3–1.4-.6–2.7-.8–4.1–1.9–9.4–3.2–18.1–3.4–25-.5–19.6 6.6–20.2 6.6–20.2h2.1c0–4.2-.5–8.8-.9–12.3-.2–1.9-.6–3.6–1.2–5.3l-3.6.5-.6.1–2.9.3c-.3 0-.6 0-.9.1-.3 0-.7 0–1 .1-.3 0-.7 0–1 .1h-5.1c-.7 0–1.3 0–1.9-.1h-.3c-1.4-.1–2.8-.2–4-.4h-.2l-1.1-.2h-.2l-.9-.2c-.1 0-.2 0-.3-.1l-2.3-.5h-.1c-.4-.1-.8-.2–1.1-.3-.1 0-.1 0-.2-.1l-1-.3c-.1 0-.1 0-.2-.1-.3-.1-.6-.2-.9-.4-.1 0-.1 0-.2-.1l-.9-.4s-.1 0-.1-.1c-1.4-.6–2.6–1.3–3.6–2.1l-.1-.1-.6-.5-.2-.2-.5-.4-.2-.2-.4-.4-.2-.2-.4-.4-.2-.2-.3-.4-.2-.2-.3-.4-.1-.2c-.2-.2-.3-.4-.4-.6l-8 24.9–11.2–14.1c-4.1.6–6.9 4.7–6.3 9.1.3 2 1.2 3.8 2.6 5 .3.1 1.6.7 3.4 1.7.8.4 1.6 1 2.5 1.6 1.5 1.1 3.2 2.5 4.9 4.1h.1l.1.1.2.2.1.1.3.3.1.1.4.4c.8.8 1.8 1.9 2.8 3.5v.1l.6.9s0 .1.1.1c.2.3.4.6.5 1 0 0 0 .1.1.1l.6 1.1c.6 1.2 1.1 2.6 1.5 4.1 1.7 6.2 1.6 14.8–4 25.9 5.6 5.8 13.6 9.4 22.5 9.7z”/>

</svg>

<path fill=”#444"

d=”M28 54.2c1-.2 1.5.5 2.8.8 1.3.3 2.7.2 4-.2 2.2-.7 4.1–2.1 6.1–3.4 12.6–8.2 28.9–10.4 43.2–5.8 3 1 6 2.3 8 4.7.9 1.1 1.6 2.4 2.5 3.6s2.1 2.2 3.5 2.4c5.2.8 4.9–8.6 4.9–11.8 0–21.3–17.3–38.6–38.6–38.6S25.8 23.2 25.8 44.5c0 3.2.2 7 1.4 10 .3-.1.6-.2.8-.3z”/>

<path fill=”#8D6E63"

d=”M44.3 103.5c0 .2-.1.4-.1.5-.5 3.9.3 7.9 2.3 11.3 2.1 3.7 5.4 6.6 9.2 8.3 3.1 1.4 6.5 2.1 10 2.1 5.3-.1 10.6–2 14.2–5.9 1.9–2.1 3.2–4.6 4.5–7.1.9–1.7 1.8–3.4 2.5–5.2.6–1.7.6–2.3-.5–3.6–2.2–2.6–4.1–5.7–4.9–9.1-.9–4.1.3–9.7 3.5–12.6 1.3–1.2 2.8–2.5 4.4–3.9l13.1–11c1.5–1.2 2.6–3 2.9–5.1.4–3.2–1.1–6.3–3.7–7.9-.5-.3-.9-.5–1.5-.7h-.1c-.2-.1-.5-.2-.7-.2h-.1c-.3-.1-.6-.1-.8-.2–1.4-.2–2.8 0–4 .5-.8–14–13.9–11–29.9–11–14.6 0–26.8–2.5–29.4 7.8-.2.9-.5 2-.8 3.1–1.2-.4–2.4-.6–3.8-.4-.3 0-.6.1-.9.2l-.3.1-.6.2-.3.1-.6.3-.2.1-.8.5c-2.3 1.7–3.6 4.5–3.2 7.6.3 2.1 1.3 3.8 2.8 5.1 0 0 10.9 9.3 11 9.3 4.6 3.9 8.2 10.7 8.6 16.7.1 1.8 0 3.7-.5 5.5-.1 1.5–1 3–1.3 4.6z”/>

<path d=”M100.4 53.6zm-.8-.3h-.1.1zm-70.5.3l-.3.1c.1 0 .2 0 .3-.1zm-.9.4l-.2.1s.1 0 .2-.1zm1.7-.7l-.3.1c.2 0 .3-.1.3-.1z”

fill=”none”/>

<path fill=”#FFEB3B”

d=”M62.8 128h6.8l-3.4–5zm-23.6–18.3c-.1.2-.2.4-.2.5–3.1.9–6 2.7–8.4 5.4l-.2.2s-.5.6–1.5 1.7c-.9 1.1–2.2 2.6–3.7 4.5–1.3 1.6–2.8 3.6–4.4 5.8h28.6l-10.2–18.1zm72.3 16.6c-1.3–2.2–2.3–3.9–3.1–5.1-.9–1.3–1.3–2–1.3–2l-.2-.3c-.6-.9–1.2–1.7–1.9–2.4–3.1–3.4–7–5.2–10.9–5.7l-.3.4L83.6 128h28.9c-.3-.6-.7–1.2–1–1.7z”/>

<path fill=”#F57F17"

d=”M65.7 122.3l.5-.4L44 103.5l-4.3 5.6-.5.6L49.4 128h13.4l3.4–5zm0 0l.5.7 3.4 5h14l10.1–16.8.3-.4–6.4–6.2-.4.3–21 17z”/>

</svg>

<path fill=”#848484"

d=”M94.1 39.8c.1–1 0–2-.1–3 0–1-.1–1.9-.2–2.9-.2–1.8-.4–3.5-.8–5.2-.6–2.9–1.5–5.8–2.9–8.4–1.1–2.2–2.6–4.2–4.3–6–1.6–1.6–3.3–2.9–5.3–3.9–1.8–1–3.8–1.7–5.8–2.2–2-.5–4-.8–6-.9–1.9-.1–3.8-.1–5.7 0–1.7.1–3.3.3–5 .6–1.3.2–2.5.5–3.8.8l-2.2.6-.4.1v20.8c0 1-.1 1.8.4 2.7.2.3.5.6.6.9.3.9.7 1.8 1.2 2.7 1.1 1.8 2.7 3.4 4.7 4.3 2.4 1.1 5.1 1.4 7.8 1.6 4.8.3 9.6.4 14.3.3 2.2 0 4.3-.3 6.4-.9 1.2-.3 2.4-.6 3.6–1 .6-.2 1.2-.4 1.8-.5.6-.2 1.2-.5 1.7-.5z”/>

<path fill=”#FFE0B2"

d=”M66.8 116.8l17.9–8.7 3.1–8.2c-15.1–17 1.2–31.6 2.3–32.5h.1l13.2–11.1c1.5–1.2 2.5–3 2.8–5 .6–4.4–2.5–8.4–6.9–9.1–1.5-.2–3 0–4.3.6-.2–1-.5–1.9-.8–2.9–26.9 3.7–37.9–2.5–42.4–8.4–1.6 2.6–5.1 6.1–15.8 7.9-.2.9-.5 2-.8 3.1–1.2-.4–2.4-.6–3.8-.4–4.4.6–7.5 4.7–6.9 9.1.3 2 1.3 3.8 2.8 5l7.5 6.4c4.2 4.5 18.4 21.7 9 37l.7 3.7 4.7 4.6 17.6 8.9z”/>

<path fill=”#055524"

d=”M39.8 104.7c-3.2.9–6.1 2.7–8.6 5.5l-.2.2s-.5.6–1.5 1.7c-.9 1.1–2.2 2.6–3.7 4.5–2.3 2.9–5.1 6.7–8.3 11.4h31v-7.8l-8.7–15.5z”/>

<path fill=”#1DE9B6"

d=”M66.8 118l-.5-.8.5-.4–22.9–17.3h-.1l-3.4 4.4-.6.8 8.6 15.5 4.3 7.8h7.2zm26.5–12.2l.8–1.5–6.4–4.4–20.9 16.9-.5.4.5.8 6.9 10h7.2l5.6–10.1z”/>

</svg>

<path fill=”#F2A600"

d=”M30.3 43.7c3.1-.4 6.1 1 7.7 3.4 10.3–2 11–11.5 12.6–14.1 4.5 5.8 13.3 17.8 39.5 14.5 1.6–2.7 4.7–4.3 8–3.8.4 0 .7–1.9 1–1.8-.1–2.2-.3–4.4-.8–6.4v-.1C94.9 19.6 80.8 7.8 64 7.8c-15 0–27.8 9.4–32.8 22.6C29.8 34 29 38 28.9 42.1l.7 1.8.7-.2z”/>

<path d=”M89.1 102.8l.4-.3c-.1 0-.3.1-.4.3zm2.2–1.9l-.5.4c.2-.2.3-.3.5-.4zm-18 9.2c-.1 0-.2 0-.3.1.1-.1.2-.1.3-.1zm-2.4.4h-.2.2zm16.1–6.2l.3-.2-.3.2zm-9 4.5l.5-.2-.5.2zm4.9–2.1l.2-.1c-.1.1-.1.1-.2.1zm2–1.1l.5-.3-.5.3zm-4.6 2.3l.4-.2c-.1.1-.2.2-.4.2zm12.6–8.6zM30.3 41.7c-.3 0-.5.1-.7.1.2 0 .5 0 .7-.1zm35.9 69.2c-.6 0–1.2 0–1.9-.1.6 0 1.2.1 1.9.1z”

fill=”none”/>

<path fill=”#F2A600"

d=”M41.5 101.3l.8.7c-.3-.3-.5-.5-.8-.7zm1.4 1.1c.2.2.5.4.8.6-.3-.2-.6-.4-.8-.6zm1.3 1.1c.2.2.5.4.8.5-.2-.1-.5-.3-.8-.5zm54.1–68.1zM38.7 98.3c.4.4.8.8 1.1 1.3-.4-.4-.8-.8–1.1–1.3zm-7.6–67.9zm15.4 74.7l.5.3-.5-.3zm4.6 2.4l.3.1c-.1 0-.2 0-.3-.1zm-3.1–1.6l.5.3c-.2-.1-.4-.2-.5-.3zm13.6 4.6l-.9-.1.9.1zM88.9 67c-1.6 1.4–3.1 2.7–4.4 3.9–3.3 3.8–6.3 10.3–1 18.7 5.7–8.1 10.6–17.7 13.2–29.1L88.9 67zM41 100.8l-.8-.8.8.8zm8.5 6l.4.2c-.1-.1-.2-.2-.4-.2zm9.5 3.3h.1-.1zm-46.1 17.3c4.5–7.1 8.6–12.7 11.7–16.6 1.5–2 2.8–3.5 3.7–4.5 1–1.1 1.5–1.7 1.5–1.7l.2-.2c2.4–2.7 5.3–4.5 8.4–5.4.1-.2.2-.4.2-.5 0-.1 0-.2.1-.2 13.6–13.3 4.7–26.5–1.5–32.9l-4.4–3.8c-2.6 8.7–8.5 18.2–20.1 26.9–6.4 4.1–10.6 11.4–10.6 19.7 0 8.2 4.1 15.4 10.4 19.8l.4-.6z”/>

<path fill=”#FFE0B2"

d=”M67.1 110.9h-2 2zM38.8 98.1c-.4.3 2.1 5.6 2.5 5.9 1.8 1.8 4.1 2.2 6.3 3.5 4.8 2.7 10.2 3.6 15.6 4.2 5.7.6 11.5-.5 16.8–2.6 2.5–1 4.8–2.3 7–3.8 1.2-.8 2.2–1.6 3.3–2.6.4-.3 2.4–3.6 2.7–3.3–4–3.3–8–6.9–10.4–11.6–2.2–4.2–2.6–9.1-.5–13.4 1.7–3.3 4.5–5.6 7.3–7.9 2.2–1.8 4.3–3.6 6.5–5.5l4.7–3.9c1-.8 2.1–1.6 2.8–2.7 1.5–2 1.9–4.6 1.2–7–1.4–4.8–7.1–7.2–11.5–4.9–1 .5–1.9 1.3–2.6 2.2l-.5.7–1.1.1c-.8.1–1.6.2–2.4.2–2.6.2–5.3.3–7.9.1–6.8-.3–13.5–2.1–19.1–6–3.6–2.4–6.3–5.6–8.9–9-.5.9-.8 1.9–1.1 2.8-.5 1.4–1 2.7–1.6 4–1.7 3.3–4.5 5.8–8.2 6.9-.5.2–1.1.3–1.7.4-.3-.5-.7-.9–1.1–1.3-.9-.6–2.1–1.3–3.3–1.6–2.5-.7–5.2-.2–7.2 1.4–3.9 3.1–4 9.2-.1 12.5l10.5 8.9c2.4 2 4.3 4.8 5.9 7.4 2.1 3.5 3.4 7.6 3.2 11.7-.3 5.6–3.3 10.4–7.1 14.2-.1.1 13.6–13.3 0 0z”/>

<path fill=”#80DEEA”

d=”M93 99.4l-.2-.1–1.5 1.5-.5.4c-.4.4-.9.8–1.3 1.1l-.4.3c-.6.5–1.2.9–1.8 1.3l-.3.2c-.5.4–1.1.7–1.6 1l-.5.3–1.8 1-.2.1c-.7.4–1.4.7–2.1 1l-.4.2–1.8.7-.5.2c-.8.3–1.5.5–2.3.7l-2.4.6c-.1 0-.2 0-.3.1l-2.1.4h-.2c-1.5.2–3 .3–4.5.4h2–1.9c-.6 0–1.2 0–1.9-.1l-2.7-.3-.9-.1–1.6-.3h-.1c-2.7-.6–5.2–1.4–7.6–2.4l-.3-.1c-.4-.2-.8-.4–1.2-.5l-.4-.2c-.4-.2-.7-.4–1-.5l-.5-.3–1-.6-.5-.3c-.5-.3–1-.6–1.5–1-.3-.2-.5-.4-.8-.5l-.6-.5-.8-.6-.6-.5c-.3-.2-.5-.4-.8-.7l-.5-.5-.8-.8-.4-.4c-.4-.4-.8-.8–1.1–1.3-.1.2-.2.4-.2.5–3.1.9–6 2.7–8.4 5.4l-.2.2s-.5.6–1.5 1.7c-.9 1.1–2.2 2.6–3.7 4.5–3.1 3.9–7.2 9.5–11.7 16.6-.1.2-.2.4-.4.6H118c-2.7–5.4–5.1–9.8–7.1–13.1–1.3–2.2–2.3–3.9–3.1–5.1-.9–1.3–1.3–2–1.3–2l-.2-.3c-.6-.9–1.2–1.7–1.9–2.4–3.3–3.3–7.4–5.2–11.4–5.5z”/>

</svg>

<path fill=”#5D4037"

d=”M29.3 123.1c4.1–6.9 7.8–12.4 10.5–16.2 1.4–1.9 2.5–3.4 3.3–4.4l1.7–2s0-.1.1-.1l.3-.3C49 95.4 51.9 91 54.1 87c9.5–17.8 6.1–29.3-.3–35.9–1.6–1.6–3.2–2.9–4.7–4-.9-.6–1.7–1.1–2.4–1.6–1.8–1–3.1–1.6–3.3–1.7–1.3–1.2–2.2–2.9–2.5–4.9-.5–4.3 2.2–6.2 6.1–6.8 1-.1 2-.1 2.9.2 9.6–1.8 11.9–8 13.3–10.6 4 5.7 13.9 9.8 38 6.1C97.1 14.3 84.5 5.4 71 7.4c-4.4.7–8.3 2.4–11.8 4.9l-.1.1c-1.1.8–2.1 1.6–3 2.6l-35 30C12.9 49.8 7.3 58.8 7.3 69.1c0 2.7.4 5.3 1.1 7.8.3 4.9-.1 11.7–2.9 18.6-.2.5-.5 1-.7 1.6–1.2 3.2–1.9 6.6–1.9 10.2 0 8.2 3.5 15.6 9.1 20.7h14.5c1–1.7 1.9–3.4 2.8–4.9zm20.5–90.8z”/>

<path fill=”#FFCC80"

d=”M63.1 19.8c-1.4 2.6–5.7 8.8–15.3 10.6-.9-.3–1.9-.3–2.9-.2–3.9.6–6.7 4.5–6.1 8.8.3 2 1.2 3.7 2.5 4.9.2.1 1.5.6 3.3 1.7.7.4 1.6 1 2.4 1.6 1.5 1.1 3.1 2.4 4.7 4 6.4 6.6 11.8 18.1 2.3 35.9 0 0 7.3 15.5 23.2 16.9 6.1.5 13.3–5.6 22.1–8.8-.1-.7-.3–1.4-.5–2.1-.3–1.3–3.9–21.5–4.1–28.2-.2–7.4.7–11.9 1.9–14.8h8.8L103 39.7c-.2–2.4-.4–4.7-.7–6.7-.2–1.8-.6–3.5–1.1–5.2–24.2 3.7–34–2.3–38.1–8zm22.3 19.6c0-.9.7–1.6 1.6–1.6.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6–1.6 1.6-.9 0–1.6-.7–1.6–1.6zm-35.6–7.1zm-4.9 68.1s0 .1-.1.1l.3-.4-.2.3z”/>

<path fill=”#00BFA5"

d=”M77.2 98.5C61.3 97.2 54.1 87 54.1 87c-2.2 4–5.1 8.4–8.9 13.1l-.3.4c-.5.7–1.1 1.3–1.7 2-.8 1–2 2.5–3.3 4.4–2.8 3.8–6.5 9.2–10.5 16.2-.9 1.6–1.8 3.2–2.8 4.9h80.8l-.3–1c-2.6–10.3–5.4–21.4–7.7–31.9–8.8 3.1–16.1 3.9–22.2 3.4z”/>

</svg>

<path d=”M64.1 34.5c-.1.1-.2.2-.3.2.1-.1.2-.2.3-.2zm.9-.7c-.1.1-.2.1-.2.2l.2-.2zm-1.9 1.3c-.1.1-.2.2-.4.2.2 0 .3-.1.4-.2zm-5.4 2.6l-.5.2c.2-.1.4-.2.5-.2zm2.8–1.1l-.2.1s.1-.1.2-.1zm-1.3.5l-.4.2c.1 0 .2-.1.4-.2zm8.8–6.3l-.2.3c.1-.1.2-.2.2-.3zm-1.9 2.1l-.3.2.3-.2zm1.4–1.4l-.3.3c.1-.2.2-.3.3-.3zm-.7.6l-.3.3c.2-.1.3-.2.3-.3zM62 35.8l-.3.2.3-.2zm5 47l-.3 1.6.3–1.6zM56.2 38.1l-.5.1c.1 0 .3 0 .5-.1zm10.4 46.5c-.1.5-.2 1.1-.4 1.6.2-.5.3–1 .4–1.6zm.6–3.6l-.2 1.6c.1-.5.1–1 .2–1.6zm-5.6–20.8c.1.1.2.3.4.4l-.4-.4zm7.5–30.9l-.6.9c.5-.7.9–1.3 1.2–1.8-.1.2-.3.5-.5.7 0 .1 0 .2-.1.2zM67.2 81c1–10.6–2.4–17.3–5.2–20.4 2.7 3.1 6.2 9.8 5.2 20.4zm-1 5.5c-.1.6-.3 1.1-.5 1.7.2-.6.4–1.2.5–1.7zm-5.6–27.4l.2.2c-.1 0-.2-.1-.2-.2zm-.3-.2s.1.1.2.1c-.1 0-.1 0-.2-.1zm-.2-.1zm-.1-.1zm1.7 38.2c-.1-.1-.2-.2-.4-.3l.1.1.3.2zm-.5–37.1l.3.3-.3-.3zm-.3-.4l.3.3c-.2-.1-.2-.2-.3-.3z”

fill=”none”/>

<path fill=”#DD2C00"

d=”M91.9 128h5.6c-3.8–12–4.4–16–4.9–20.1-.1-.5-.5–2.4-.5–2.9–2.6.7–5.2 1.1–8 1.2–8.7-.2–16.5–3.8–22.3–9.3l-.2-.2-.1-.1c-2.9.2–7.6.2–10.8.6–4.6.6–9.6 1.3–15 2.4–4.7.9–11.2 2.7–33.3 9.3l.5.7L15.5 128h70.2"/>

<path fill=”#FFEB3B”

d=”M66.2 86.5c0-.1 0-.1.1-.2.1-.6.3–1.1.4–1.6v-.2l.3–1.6v-.1l.2–1.6c1–10.6–2.4–17.3–5.2–20.4-.1-.1-.2-.3-.4-.4l-.1-.1-.3-.3-.1-.1-.3-.3-.1-.1-.2-.2-.1-.1c-.1-.1-.1-.1-.2-.1 0 0-.1 0-.1-.1l-.1-.1s-.1 0-.1-.1c-1.6–1.7–3.3–3–4.9–4.1-.9-.6–1.7–1.2–2.5–1.6–1.8–1.1–3.2–1.6–3.4–1.7–1.3–1.2–2.3–3–2.6–5-.6–4.4.3–6.4 4.3–7.1 1-.2 2-.1 3 .2l.1-.7c.6-.1 1.1-.2 1.6-.4l.5-.1 1.1-.3.5-.2 1-.3.4-.2c.4-.1.7-.3 1.1-.5l.2-.1 1.2-.6.3-.2c.3-.1.5-.3.8-.5.1-.1.3-.2.4-.2.2-.1.4-.3.7-.4.1-.1.2-.2.3-.2l.7-.5c.1-.1.2-.1.2-.2.3-.2.5-.4.8-.7.1-.1.2-.1.2-.2l.5-.5.3-.3.4-.4.3-.3.3-.4c.1-.1.2-.2.2-.3.2-.2.3-.4.4-.6l.6-.9.1-.2c.2-.3.3-.5.5-.7 4.2 5.9 14.5 10.4 39.3 6.7–4.2–14–17.3–23.5–31.3–21.4–5.3.8–10.1 3.2–14 6.6l-.2.2c-.5.4–1 .9–1.4 1.4–5.3 4.8–23.3 19.8–52.2 26.5–3.9 0–7.4 1.6–9.9 4.2v19.3c.3.3.6.6.9.8l-.3.9S30.9 96.4 64 90.3l1.6–1.8c0-.1 0-.1.1-.2.2-.7.4–1.3.5–1.8z”/>

<path fill=”#FFE0B2"

d=”M84 106.2c2.8-.1 5.4-.5 8–1.2l.8–3.8c4.3–19.3 9.7–37.4 15–52.9h6.9l-4.8–8.2c-.2–1.9-.6–3.6–1.2–5.3–24.8 3.7–35–2.5–39.1–8.4-.3.5-.7 1.1–1.2 1.8l-.4.6-.2.3-.3.4-.3.3-.4.4-.3.3-.5.5s-.1 0-.2.1c-.3.2-.5.4-.8.7-.1.1-.2.1-.2.2-.2.2-.4.3-.7.5-.1.1-.2.2-.3.2-.2.1-.4.3-.7.4-.1.1-.2.2-.4.2l-.8.5-.3.2–1.2.6-.2.1–1.1.5-.4.2c-.3.1-.6.2–1 .3l-.5.2c-.3.1-.7.2–1.1.3l-.5.1–1.6.4c-.1.2-.1.5-.1.7-.9-.3–1.9-.4–3-.2–4.1.6–6.9 4.7–6.3 9.1.3 2 1.2 3.8 2.6 5 .3.1 1.6.7 3.4 1.7.8.4 1.6 1 2.5 1.6 1.5 1.1 3.2 2.5 4.9 4.1l.1.1.1.1.1.1s.1.1.2.1c0 0 .1 0 .1.1l.2.2.1.1.3.3.1.1.3.3.1.1s.2.3.4.4c2.7 3.1 7.2 9.8 6.2 20.4l-.2 1.6v.1l-.3 1.6v.2c-.1.5-.2 1.1-.4 1.6 0 .1 0 .1-.1.2-.1.6-.3 1.1-.5 1.7 0 .1 0 .1-.1.2-.8 2.6–1.8 5.3–3.3 8.3.1.1.2.2.4.3 5.7 5.6 13.5 9.1 22.2 9.3z”/>

</svg>

<path fill=”#C2C2C2"

d=”M83.2 26.6c.1-.9.2–1.8.2–2.7C83.4 13.5 75 5 64.6 5s-18.8 8.4–18.8 18.8c0 1.4.2 2.7.4 4 5.4–4 12.2–6.4 19.4–6.4 6.5.1 12.5 2 17.6 5.2z”/>

<path fill=”#848484"

d=”M41.4 58.4c9.6–1.9 10.3–10.7 11.7–13.2 4.2 5.4 12.4 16.6 36.8 13.5 1.5–2.5 4.4–6 7.4–5.6.3 0 .6.1 1 .2C98 42 92 32.1 83.1 26.5 78 23.3 72 21.4 65.6 21.4c-7.3 0–14 2.4–19.4 6.4–7.9 5.9–13.1 15.2–13.3 25.7.4-.1.9 1.7 1.4 1.7 2.8-.4 5.6 1 7.1 3.2z”/>

<path fill=”#FF5722"

d=”M109.6 121.5c-1.2–2–2.2–3.6–2.9–4.8l-1.2–1.8-.2-.3c-.5-.8–1.1–1.6–1.8–2.3–3.1–3.3–6.9–5.1–10.8–5.3 0 0 .1 0 .1.1l-.2-.1c-3.4 3.7–7.8 6.6–12.7 8.5V128h33.4c-1.4–2.5–2.6–4.7–3.7–6.5zM42 106l-.2.5c-2.9.8–5.6 2.5–7.8 5.1l-.2.2s-.5.6–1.4 1.6c-.9 1–2 2.4–3.5 4.2–2.1 2.6–4.7 6.1–7.5 10.4h28v-15.7c-2.8–1.7–5.3–3.8–7.4–6.3z”/>

<path fill=”#FFE0B2"

d=”M42 106c2.1 2.4 4.6 4.5 7.4 6.3 5.2 3.3 11.5 5.3 18.3 5.4 4.3-.1 8.4-.9 12.1–2.3 5–1.9 9.3–4.8 12.7–8.5l.2.1s-.1 0-.1-.1c-15.7–12.3–12–21.7–7.8–26.6 1.3–1.1 2.6–2.3 4.1–3.6l12.2–10.3c1.4–1.2 2.4–2.8 2.7–4.8.5–3.8–1.9–7.3–5.4–8.2-.3-.1-.6-.2–1-.2–3.1-.4–5.9 1.1–7.4 3.6–24.4 3.1–32.7–8.1–36.8–13.5–1.5 2.4–2.1 11.3–11.7 13.2–1.6–2.3–4.3–3.6–7.2–3.2l-1.4.3c-3.4 1.1–5.5 4.5–5 8.1.3 1.9 1.3 3.6 2.6 4.7l10.2 8.7c5.8 6 14.1 18.3 1.4 30.7-.1.1-.1.2-.1.2zm37.6–45.3c.8 0 1.5.7 1.5 1.5s-.7 1.5–1.5 1.5–1.5-.7–1.5–1.5c-.1-.9.6–1.5 1.5–1.5zm-24 0c.8 0 1.5.7 1.5 1.5s-.7 1.5–1.5 1.5–1.5-.7–1.5–1.5c-.1-.9.6–1.5 1.5–1.5z”/>

</svg>

</defs>

</svg>

Inside our toolbar.component.ts, modify our code to this:

import { Component, OnInit, Output, Input, EventEmitter } from ‘@angular/core’;

import { MatDialog, MatSnackBar, MatSnackBarRef, SimpleSnackBar } from ‘@angular/material’;

import { NewContactDialogComponent } from ‘../new-contact-dialog/new-contact-dialog.component’;

import { Router } from ‘@angular/router’;

@Component({

moduleId: module.id,

selector: ‘app-toolbar’,

templateUrl: ‘./toolbar.component.html’,

styleUrls: [‘./toolbar.component.scss’]

})

export class ToolbarComponent implements OnInit {

@Output() toggleSidenav = new EventEmitter<void>();

@Output() toggleTheme = new EventEmitter<void>();

@Output() toggleDir = new EventEmitter<void>();

text: string;

constructor(private dialog: MatDialog,

private snackBar: MatSnackBar,

private router: Router) { }

ngOnInit() {

}

openAddContactDialog(): void {

let dialogRef = this.dialog.open(NewContactDialogComponent, {

width: ‘450px’

});

dialogRef.afterClosed().subscribe(result => {

console.log(‘Dialog closed’, result);

if (result) {

this.openSnackBar(“Successfully Added New Contacts User!”, “Show User Profile”)

.onAction().subscribe(() => {

this.router.navigate([‘/contactmanager’, result.id]);

});

}

});

}

openSnackBar(message: string, action: string) : MatSnackBarRef<SimpleSnackBar> {

return this.snackBar.open(message, action, {

duration: 5000

});

}

And, in our toolbar.component.scss:

$iconWidth: 56px;

.example-spacer {

flex: 1 1 auto;

}

.sidenav-toggle {

display: none;

padding: 0;

margin: 8px;

min-width: $iconWidth;

@media (max-width: 720px) {

display: flex;

align-items: center;

justify-content: center;

}

mat-icon {

font-size: 30px;

height: $iconWidth;

width: $iconWidth;

line-height: $iconWidth;

color: #fff;

}

Then, in our toolbar.component.ts:

<mat-toolbar color=”primary”>

<mat-icon>menu</mat-icon>

</button>

<span>Contact Manager</span>

<mat-icon>more_vert</mat-icon>

</button>

<mat-menu #menu=”matMenu”>

<mat-icon>add</mat-icon>

New Contacts Person

</button>

<mat-icon>flip_to_front</mat-icon>

Change Theme Color

</button>

<mat-icon>flip_to_back</mat-icon>

Change Direction

</button>

</mat-menu>

</mat-toolbar>

Then, in our sidenav.comonent.ts:

<mat-sidenav-container class=”app-sidenav-container”

[class.dark-theme]=”isDarkTheme”

[dir]=”dir”>

<mat-sidenav #sidenav

class=”app-sidenav mat-elevation-z10"

[opened]=”!isScreenSmall()”

[mode]=”isScreenSmall() ? ‘over’ : ‘side’”>

<mat-toolbar color=”primary”>

Contacts

</mat-toolbar>

<mat-nav-list>

<mat-list-item *ngFor=”let user of users | async”>

<a matLine

[routerLink]=”[‘/contactmanager’, user.id]”>

<mat-icon svgIcon=”{{user.avatar}}”>

</mat-icon>

</a>

</mat-list-item>

</mat-nav-list>

</mat-sidenav>

<app-toolbar (toggleTheme)=”toggleTheme()”

(toggleSidenav)=”sidenav.toggle()”

(toggleDir)=”toggleDir()”>

</app-toolbar>

<router-outlet></router-outlet>

</div>

</mat-sidenav-container>

In our sidenav.component.scss:

.app-sidenav-container {

flex: 1;

position: fixed;

width: 100%;

min-width: 100%;

height: 100%;

min-height: 100%;

}

.app-sidenav-content {

display: flex;

height: 100%;

flex-direction: column;

}

.app-sidenav {

width: 240px;

}

.wrapper {

margin: 50px;

}

Modify the sidenav.component.ts as shown:

import { Component, OnInit, NgZone, ViewChild } from ‘@angular/core’;

import { Observable } from ‘rxjs/Observable’;

import { Router } from ‘@angular/router’;

import { MatSidenav } from ‘@angular/material’;

import { UserService } from ‘../services/user.service’;

import { User } from ‘../models/User’;

const SMALL_WIDTH_BREAKOUT = 720;

@Component({

moduleId: module.id,

selector: ‘app-sidenav’,

templateUrl: ‘./sidenav.component.html’,

styleUrls: [‘./sidenav.component.scss’]

})

export class SidenavComponent implements OnInit {

private mediaMatcher: MediaQueryList = matchMedia(`(max-width: ${SMALL_WIDTH_BREAKOUT}px)`)

users: Observable<User[]>;

isDarkTheme: boolean = false;

dir: string = ‘ltr’;

constructor(

zone: NgZone,

private userService: UserService,

private router: Router) {

this.mediaMatcher.addListener(mql =>

zone.run(() => this.mediaMatcher = mql));

}

@ViewChild(MatSidenav) sidenav: MatSidenav;

ngOnInit() {

this.users = this.userService.users;

this.userService.loadAll();

this.router.events.subscribe(() => {

if (this.isScreenSmall())

this.sidenav.close();

});

}

isScreenSmall(): boolean {

return this.mediaMatcher.matches;

}

toggleTheme() {

this.isDarkTheme = !this.isDarkTheme;

}

toggleDir() {

this.dir = this.dir == ‘ltr’ ? ‘rtl’ : ‘ltr’;

this.sidenav.toggle().then(() => this.sidenav.toggle());

}

new-diaglog.component.html should be:

New Contacts Person

</h2>

<mat-dialog-content>

<mat-form-field>

<mat-select placeholder=”User Image” [(ngModel)]=”user.avatar”>

<mat-select-trigger>

<mat-icon svgIcon=”{{ user.avatar }}”></mat-icon> {{ user.avatar }}

</mat-select-trigger>

<mat-option *ngFor=”let avatar of avatars” [value]=”avatar”>

<mat-icon svgIcon=”{{ avatar }}”></mat-icon>{{ avatar }}

</mat-option>

</mat-select>

<mat-hint>Your User Image</mat-hint>

</mat-form-field>

<mat-form-field>

<mat-hint>Your Name</mat-hint>

<mat-error *ngIf=”name.invalid”>{{getErrorMessage()}}</mat-error>

</mat-form-field>

<mat-form-field>

<mat-datepicker-toggle matSuffix [for]=”picker”></mat-datepicker-toggle>

<mat-datepicker #picker></mat-datepicker>

<mat-hint>Your Birth Date</mat-hint>

</mat-form-field>

<mat-form-field>

</textarea>

<mat-hint>Your Biography</mat-hint>

</mat-form-field>

</div>

</mat-dialog-content>

<mat-dialog-actions>

<mat-icon>save</mat-icon> Save

</button>

<mat-icon>cancel</mat-icon> Cancel

</button>

</mat-dialog-actions>

And, the SCSS should be:

.example-container {

display: flex;

flex-direction: column;

}

.example-container > * {

width: 100%;

}

And, of course, our component:

import { Component, OnInit } from ‘@angular/core’;

import { MatDialogRef } from ‘@angular/material’;

import { User } from ‘../models/user’;

import { FormControl, Validators } from ‘@angular/forms’;

import { UserService } from ‘../services/user.service’;

@Component({

selector: ‘app-new-contact-dialog’,

templateUrl: ‘./new-contact-dialog.component.html’,

styleUrls: [‘./new-contact-dialog.component.scss’]

})

export class NewContactDialogComponent implements OnInit {

user: User;

avatars = [

‘svg-1’,

‘svg-2’,

‘svg-3’,

‘svg-4’

];

constructor(

private dialogRef: MatDialogRef<NewContactDialogComponent>,

private userService: UserService) {}

name = new FormControl(‘’, [Validators.required]);

getErrorMessage() {

return this.name.hasError(‘required’) ? ‘You Must Enter Your Name.’ : ‘’;

}

ngOnInit() {

this.user = new User();

}

save(): void {

this.userService.addUser(this.user).then(user => {

this.dialogRef.close(user);

});

}

cancel(): void {

this.dialogRef.close(null);

}

In our notes.component.html:

<mat-form-field>

<input matInput

(keyup)=”applyFilter($event.target.value)”

placeholder=”Filter”>

</mat-form-field>

</div>

<mat-table #table [dataSource]=”dataSource” matSort>

<ng-container matColumnDef=”position”>

<mat-header-cell *matHeaderCellDef mat-sort-header>No.</mat-header-cell>

<mat-cell *matCellDef=”let note”>{{ note.id }}</mat-cell>

</ng-container>

<ng-container matColumnDef=”name”>

<mat-header-cell *matHeaderCellDef mat-sort-header>Title</mat-header-cell>

<mat-cell *matCellDef=”let note”>{{ note.title }}</mat-cell>

</ng-container>

<ng-container matColumnDef=”date”>

<mat-header-cell *matHeaderCellDef mat-sort-header>Date</mat-header-cell>

<mat-cell *matCellDef=”let note”>{{ note.date | date: ‘yyyy-MM-dd’ }}</mat-cell>

</ng-container>

<mat-header-row *matHeaderRowDef=”displayedColumns”></mat-header-row>

<mat-row *matRowDef=”let row; columns: displayedColumns;”></mat-row>

</mat-table>

<mat-paginator #paginator

[length]=”200"

[pageSize]=”2"

[pageSizeOptions]=”

[1,

10,

25,

50,

75,

100,

125,

150,

175,

200]”>

</mat-paginator>

</div>

In our SCSS:

.example-container {

display: flex;

flex-direction: column;

max-height: 500px;

min-width: 300px;

}

.mat-table {

overflow: auto;

max-height: 500px;

}

.example-header {

min-height: 64px;

padding: 8px 24px 0;

}

.mat-form-field {

font-size: 14px;

width: 100%;

font-family: ‘Open Sans’, BlinkMacSystemFont, sans-serif;

}

And, our component:

.example-container {

display: flex;

flex-direction: column;

max-height: 500px;

min-width: 300px;

}

.mat-table {

overflow: auto;

max-height: 500px;

}

.example-header {

min-height: 64px;

padding: 8px 24px 0;

}

.mat-form-field {

font-size: 14px;

width: 100%;

font-family: ‘Open Sans’, BlinkMacSystemFont, sans-serif;

}

And our component:

import { Component, OnInit, Input, ViewChild } from ‘@angular/core’;

import { Note } from ‘../models/Note’;

import { MatTableDataSource, MatPaginator, MatSort } from ‘@angular/material’;

@Component({

selector: ‘app-notes’,

templateUrl: ‘./notes.component.html’,

styleUrls: [‘./notes.component.scss’]

})

export class NotesComponent implements OnInit {

@Input() notes: Note[];

displayedColumns = [‘position’, ‘name’, ‘date’];

dataSource: MatTableDataSource<Note>;

applyFilter(filterValue: string) {

filterValue = filterValue.trim();

filterValue = filterValue.toLowerCase();

this.dataSource.filter = filterValue;

}

constructor() { }

@ViewChild(MatPaginator) paginator: MatPaginator;

@ViewChild(MatSort) sort: MatSort;

ngAfterViewInit() {

this.dataSource.paginator = this.paginator;

this.dataSource.sort = this.sort;

}

ngOnInit() {

this.dataSource = new MatTableDataSource<Note>(this.notes);

}

Our second to last component to modify: main-content.component.html:

<mat-progress-bar mode=”indeterminate”></mat-progress-bar>

</div>

<mat-card>

<mat-card-header>

<mat-icon mat-card-avatar svgIcon=”{{ user.avatar }}”></mat-icon>

<mat-card-title>

</mat-card-title>

</mat-card-header>

<mat-card-subtitle>Birth Date: {{ user.birthDate | date: ‘yyyy-MM-dd’ }}</mat-card-subtitle>

<mat-card-content>

<mat-tab-group>

<mat-tab label=”Biography”>

<span>

</span>

</mat-tab>

<mat-tab label=”Notes”>

<app-notes [notes]=”user.notes”></app-notes>

</mat-tab>

</mat-tab-group>

</mat-card-content>

</mat-card>

</div>

And our component:

import { Component, OnInit } from ‘@angular/core’;

import { User } from ‘../models/user’;

import { ActivatedRoute } from ‘@angular/router’;

import { UserService } from ‘../services/user.service’;

@Component({

moduleId: module.id,

selector: ‘app-main-content’,

templateUrl: ‘./main-content.component.html’,

styleUrls: [‘./main-content.component.scss’]

})

export class MainContentComponent implements OnInit {

user: User;

constructor(

private route: ActivatedRoute,

private service: UserService) { }

ngOnInit() {

this.route.params.subscribe(params => {

let id = params[‘id’];

if(!id) id = 1;

this.user = null;

this.service.users.subscribe(users => {

if (users.length == 0) return;

setTimeout(() => {

this.user = this.service.userById(id);

}, 500);

});

})

}

Add this in our app.module.ts:

// removed for brevity

const appRoutes: Routes = [

{ path: ‘contactmanager’, loadChildren: ‘./contactmanager/contactmanager.module#ContactManagerModule’ },

{ path: ‘**’, redirectTo: ‘contactmanager’ }

];

// removed for brevity

For our final line of code, in our app.component.html:

<app-sidenav></app-sidenav>

<router-outlet></router-outlet>

Let’s start our server:

$ ng serve -o

Go to http://localhost:4200.

You should see:

And when you click this button:

You will see:

Congrats! My company and me would give a thumbs-up to you! Please subscribe and enjoy!

Code can be found here:

https://github.com/aaronhma/contacts

Angular Material Masterclass

Written by Aaron Ma

More from Aaron Ma

Is Brilliant Premium Worth It?

A few days ago, I received Brilliant from a friend. I practiced solving some problems on Brilliant with the Premium subscription, and I…

How to Pass Udacity Projects

Overview

How to Setup TensorFlow GPU 2.2 with NVIDIA GPUs

Learn how to setup TensorFlow GPU and CUDA for powerful deep learning models!

Hands-On ML, Edition 2 by Aerolien Geron, Summary Part 1

This is the first part of the 2 part series by Aaron Ma on the summary of Hands-On ML.

Recommended from Medium

Introducing Angular v17

Last month marked the 13th anniversary of Angular’s red shield. AngularJS was the starting point for a new wave of JavaScript frameworks…

Understanding the @Input Decorator in Angular

Introduction

Lists

Stories to Help You Grow as a Software Developer

General Coding Knowledge

Modern Marketing

Medium Publications Accepting Story Submissions

Angular 17: A Look at the New Features

Introduction

Adding scss assets to Angular library

In a previous article, I was talking about some ways to include assets in an Agular library. Let’s go a little further, and see how we can…

#Angular incremental DOM 🔍

#Angular incremental DOM 🔍

Angular Initial Setup

First, install npm, then go to the angular CLI command to install angular to your machine.