Angular Material Masterclass

$ ng new my-app — styles=scss
$ cd my-app
npm install @angular/cdk @angular/animations @angular/material hammerjs
yarn add @angular/cdk @angular/animations @angular/material hammerjs
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,
App Structure
this._users = new BehaviorSubject<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’);});}}
export class Note {id: number;title: string;date: Date;}
import { Note } from ‘./Note’;export class User {id: number;birthDate: Date;name: string;avatar: string;bio: string;notes: Note[] = [];}
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’);});}}
@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;}
<?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"/>

--

--

Living in The Milky Way 😀

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store