Angular

angular_auth_guard.md

Generate guard

ng g guard guards/auth
  -> select "canActivate"

auth.guard.ts

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from 'src/app/services/auth.service';
import { map, take, tap } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private auth: AuthService, private router: Router) {}
  
  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.auth.user$.pipe(
      take(1),
      map(user => !!user),
      tap(loggedIn => {
        if (!loggedIn) {
          console.log('access denied');
          this.router.navigate(['/login'], {queryParams: {returnUrl: state.url}});
        }
      })
    )
  }
}

app-routing.module.ts

...
import { AuthGuard } from './guards/auth.guard';
...

{
  path: 'shopping-cart',
  component: ShoppingCartComponent,
  canActivate: [AuthGuard]
},

admin.guard.ts

import { CanActivate } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { AuthService } from 'src/app/services/auth.service';

@Injectable({
  providedIn: 'root'
})
export class AdminGuard implements CanActivate {

  constructor(private auth: AuthService) {}
  
  canActivate(): Observable<boolean> {
    return this.auth.user$.pipe(map(user => user.isAdmin));
  }
}

app-routing.module.ts

...
import { AdminGuard } from './guards/admin.guard';
...

{
  path: 'admin/products',
  component: AdminProductsComponent,
  canActivate: [AuthGuard, AdminGuard]
},

angular_cars_crud_json.md

Package

{
  "name": "car-tool-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "run-p web rest",
    "web": "ng serve",
    "rest": "json-server --port 4250 db.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.9",
    "@angular/common": "~8.2.9",
    "@angular/compiler": "~8.2.9",
    "@angular/core": "~8.2.9",
    "@angular/forms": "~8.2.9",
    "@angular/platform-browser": "~8.2.9",
    "@angular/platform-browser-dynamic": "~8.2.9",
    "@angular/router": "~8.2.9",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.8",
    "@angular/cli": "~8.3.8",
    "@angular/compiler-cli": "~8.2.9",
    "@angular/language-service": "~8.2.9",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "json-server": "0.15.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "npm-run-all": "4.1.5",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

Main module

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { CarToolModule } from './car-tool/car-tool.module';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    CarToolModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Submodule

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { SharedModule } from '../shared/shared.module';

import { CarHomeComponent } from './components/car-home/car-home.component';
import { CarTableComponent } from './components/car-table/car-table.component';
import { EditCarRowComponent } from './components/edit-car-row/edit-car-row.component';
import { ViewCarRowComponent } from './components/view-car-row/view-car-row.component';
import { CarFormComponent } from './components/car-form/car-form.component';

@NgModule({
  declarations: [
    CarHomeComponent, CarTableComponent, EditCarRowComponent,
    ViewCarRowComponent, CarFormComponent
  ],
  imports: [
    CommonModule, ReactiveFormsModule, HttpClientModule, SharedModule,
  ],
  exports: [CarHomeComponent],
})
export class CarToolModule { }

Home

headerText = 'Car Tool';

  cars: Car[] = [];

  editCarId = 0;

  constructor(private carsSvc: CarsService) { }

  refreshCars(mutate?: Observable<any>) {

    const pipes = [
      concatMapTo(this.carsSvc.all()),
      map( (cars: Car[]) => cars.slice(0, 3)),
    ];

    (mutate || of(null))
      .pipe(...pipes as [])
      .subscribe(cars => { this.cars = cars; }, err => {
        console.log(err);
        this.cars = [];
      }, () => {
        this.editCarId = 0;
      });
  }

  ngOnInit() {
    this.refreshCars();
  }

  doRefreshCars() {
    this.refreshCars();
  }

  doEditCar(carId) {
    this.editCarId = carId;
  }

  doCancelCar() {
    this.editCarId = 0;
  }

  doDeleteCar(carId) {
    this.refreshCars(this.carsSvc.delete(carId));
  }

  doReplaceCar(car: Car) {
    this.refreshCars(this.carsSvc.replace(car));
  }

  doAppendCar(newCar: Car) {
    this.refreshCars(this.carsSvc.append(newCar));
  }

<car-table [cars]="cars" [editCarId]="editCarId"
  (editCar)="doEditCar($event)"
  (deleteCar)="doDeleteCar($event)"
  (saveCar)="doReplaceCar($event)"
  (cancelCar)="doCancelCar()"></car-table>

<car-form buttonText="Add Car" (submitCar)="doAppendCar($event)"></car-form>

Table

@Input()
  cars: Car[] = [];

  @Input()
  editCarId = 0;

  @Output()
  editCar = new EventEmitter<number>();

  @Output()
  deleteCar = new EventEmitter<number>();

  @Output()
  saveCar = new EventEmitter<Car>();

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

  doEdit(carId: number) {
    this.editCar.emit(carId);
  }

  doDelete(carId: number) {
    this.deleteCar.emit(carId);
  }

  doSave(car: Car) {
    this.saveCar.emit(car);
  }

  doCancel() {
    this.cancelCar.emit();
  }

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Make</th>
      <th>Model</th>
      <th>Year</th>
      <th>Color</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let car of cars">
      <tr class="view-car-row"
        *ngIf="editCarId !== car.id"
        [car]="car" (editCar)="doEdit($event)"
        (deleteCar)="doDelete($event)" ></tr>
      <tr class="edit-car-row"
        *ngIf="editCarId === car.id"
        [car]="car" (saveCar)="doSave($event)"
        (cancelCar)="doCancel()" ></tr>
    </ng-container>
  </tbody>
</table>

Edit Row

@Input()
  car: Car;

  @Output()
  saveCar = new EventEmitter<Car>();

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

  editCarForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.editCarForm = this.fb.group({
      make: this.car.make,
      model: this.car.model,
      year: this.car.year,
      color: this.car.color,
      price: this.car.price,
    });
  }

  doSave() {
    this.saveCar.emit({
      ...this.editCarForm.value,
      id: this.car.id,
    });
  }

  doCancel() {
    this.cancelCar.emit();
  }

<ng-container [formGroup]="editCarForm">
  <td>{{car.id}}</td>
  <td><input type="text" formControlName="make"></td>
  <td><input type="text" formControlName="model"></td>
  <td><input type="number" formControlName="year"></td>
  <td><input type="text" formControlName="color"></td>
  <td><input type="number" formControlName="price"></td>
  <td>
    <button (click)="doSave()">Save</button>
    <button (click)="doCancel()">Cancel</button>
  </td>
</ng-container>

View Row

@Input()
  car: Car = null;

  @Output()
  editCar = new EventEmitter<number>();

  @Output()
  deleteCar = new EventEmitter<number>();

  constructor() { }

  ngOnInit() {
  }

  doEdit() {
    this.editCar.emit(this.car.id);
  }

  doDelete() {
    this.deleteCar.emit(this.car.id);
  }

  
<td>{{car.id}}</td>
<td>{{car.make}}</td>
<td>{{car.model}}</td>
<td>{{car.year}}</td>
<td>{{car.color}}</td>
<td>{{car.price}}</td>
<td>
  <button (click)="doEdit()">Edit</button>
  <button (click)="doDelete()">Delete</button>
</td>

Form

@Input()
  buttonText = 'Submit Car';

  @Output()
  submitCar = new EventEmitter<Car>();

  carForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.carForm = this.fb.group({
      make: '',
      model: '',
      year: 1900,
      color: '',
      price: 0,
    });
  }

  doSubmitCar() {

    this.submitCar.emit({
      ...this.carForm.value,
    });

    this.carForm.setValue({
      make: '',
      model: '',
      year: 1900,
      color: '',
      price: 0,
    });

  }

<form [formGroup]="carForm">
    <div>
      <label for="make-input">Make:</label>
      <input type="text" id="make-input" formControlName="make">
    </div>
    <div>
      <label for="model-input">Model:</label>
      <input type="text" id="model-input" formControlName="model">
    </div>
    <div>
      <label for="year-input">Year:</label>
      <input type="number" id="year-input" formControlName="year">
    </div>
    <div>
      <label for="color-input">Color:</label>
      <input type="text" id="color-input" formControlName="color">
    </div>
    <div>
      <label for="price-input">Price:</label>
      <input type="number" id="price-input" formControlName="price">
    </div>
    <button (click)="doSubmitCar()">{{buttonText}}</button>
  </form>

Model

export interface Car {
  id?: number;
  make: string;
  model: string;
  year: number;
  color: string;
  price: number;
}

Service

_baseUrl = 'http://localhost:4250/cars';

  constructor(private httpClient: HttpClient) { }

  private getCollectionUrl() {
    return this._baseUrl;
  }

  private getElementUrl(elementId: any) {
    return this._baseUrl + '/' + encodeURIComponent(String(elementId));
  }

  all() {
    return this.httpClient.get<Car[]>(this.getCollectionUrl());
  }

  append(car: Car) {
    return this.httpClient.post<Car>(this.getCollectionUrl(), car);
  }

  replace(car: Car) {
    return this.httpClient.put<Car>(this.getElementUrl(car.id), car);
  }

  delete(carId: number) {
    return this.httpClient.delete<Car>(this.getElementUrl(carId));
  }

angular_cheatsheet.md

Structural Directives

Ng Docs: Structural Directives

Ng Docs: Template Reference Variables

<!-- *ngIF -->
<p *ngIf="expression; else expression">
  Expression is true
</p>
<ng-template #notExpression>
  <p>
    Expression is false
  </p>
</ng-template>

<!-- *ngFor -->
<ul>

  <li *ngFor="let element of array">{{element.}}</li>

</ul>

<!-- *ngSwitchCase -->
<ng-container [ngSwitch]="switch_expression">

  <p *ngSwitchCase="match_expression_1"> 1 </p>

  <p *ngSwitchCase="match_expression_2"> 2 </p>

  <p *ngSwitchDefault> Default </p>
  
</ng-container>

---

Class Field Decorators

Ng Docs: Inputs & Outputs

Ng Docs: Host Binding

Ng Docs: Host Listener

Ng Docs: Content Child

Ng Docs: Content Children

Ng Docs: View Child

Ng Docs: View Children

// Input
@Input() myProperty;

// Output
@Output() myEvent = new EventEmitter();

// Host Binding
@HostBinding('class.error') hasError;

// Host Listener
@HostListener('click', ['$event']) onClick(e) {...}

// Content Child
@ContentChild(myPredicate) myChildComponent;

// Content Children
@ContentChildren(myPredicate) myChildComponents;

// View Child
@ViewChild(myPredicate) myChildComponent;

// View Children
@ViewChildren(myPredicate) myChildComponents;

---

Data Binding

Ng Docs: Property Binding

Ng Docs: Attribute, Class, and Style Binding

Ng Docs: Event Binding

Ng Docs: Two Way Binding

<!-- One Way Binding -->
<p>{{ name }}</p>

<!-- Property Binding -->
<input [value]="name" >

<!-- Attribute Binding -->
<button [attr.aria-label="OK"]>OK</button>

<!-- Two Way Binding -->
<input [(ngModel)]="name" >

<!-- Event Binding -->
<input  (ngModel)="name"
        (input)="name = $event.target.value" >

---

Styling

Ng Docs: Component Styles

<!-- ngStyle -->
<p [ngStyle]="{'color' : 'blue'}">...</p>


<!-- ngClass -->
<p [ngClass]="'first second'">...</p>

<p [ngClass]="['first', 'second']">...</p>

<p [ngClass]="{'first': true, 'second': false}">...</p>

<p [ngClass]="stringExp|arrayExp|objExp">...</p>

<p [ngClass]="{'class1 class2 class3': true}">...</p>

---

Pipes

Ng Docs: Pipes

<!-- Lowercase -->
<p> {{ name | lowercase }} </p>

<!-- Uppercase -->
<p> {{ name | uppercase }} </p>

<!-- Date -->
<p> {{ today | date:'medium' }} </p>

<!-- Date Format -->
<p> {{ today | date:'y-MM-d' }} </p>

<!-- Currency -->
<p> {{ 3.5 | currency:'€' }} </p>

<!-- Percent -->
<p> {{ 0.5 | percent:'1.2' }} </p>

<!-- Number -->
<p> {{ 0.5 | number:'1.2' }} </p>

---

Routing

Ng Docs: Routing

<!-- Router Outlet -->
<router-outlet name="aux"></router-outlet>

<!-- Router Link -->
<a [routerLink]="[ 'path', routerParam ]"></a>

<a [routerLink]="[ 'path', { matrixParam: 'value' } ]"></a>

<a [routerLink]="[ 'path' ]"
    [queryParams]="{ page: 1 }" ></a>

<a [routerLink]="[ 'path' ]"
    fragment="anchor" ></a>

---

Lifecycle Hooks

Ng Docs: Lifecycle Hooks

// OnInit
export class Component implements OnInit {
  ngOnInit()
}

// OnChanges
export class Component implements OnChanges {
  ngOnChanges()
}

// AfterViewInit
export class Component implements AfterViewInit {
  ngAfterViewInit()
}

// OnDestroy
export class Component implements OnDestroy {
  ngOnDestroy()
}

---

angular_components.md

Components

• is Directive with a view
• Component metadata inherites from Directive metadata

app.component.ts

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

@Component({
  selector: 'mw-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent() {

}

media-item.component.ts

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

@Component({
  selector: 'mw-media-item',
  templateUrl: './media-item.component.html',
  styleUrls: ['./media-item.component.css']
})

export class MediaItemComponent() {

}

app.component.html

...
<mw-media-item></mw-media-item>

angular_dependency_injection.md

Dependency Injection

• handling creating instances of things and injecting them into places where they are needed
• DI has 2 steps:
  • service registration (list of things that can be injected)
  • retrieval of registered things, done with constructor(){} injection, either by TypeScript type anotations or by using the @Inject() decorator
• Angular provides access to the Injector itself for locating specific services
• Wherever they are registered, they will be available within the component and it's children

Steps:

1. Register services in the provider class or the provide helper function or by providing the type, at the bootstrap call or in the compononent metadata decorators
2. Initialize them within class cunstroctor signatures

Services === Singletons, stored in memory at client level

Class Constructor Injection

media-item-form.component.ts

import { OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
export class MediaItemFormComponent implements OnInit {
  form: FormGroup;

  constructor(
    private formBuilder: FormBuilder
  ) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      medium: this.formBuilder.control('Movies'),
      name: this.formBuilder.control('', Validators.compose([
        Validators.required,
        Validators.pattern('[\\w\\-\\s\\/]+')
      ])),
      category: this.formBuilder.control(''),
      year: this.formBuilder.control('', this.yearValidator)
    });
  }

  yearValidator(control: FormControl) {
    if(control.value.trim().length === 0) {
      return null;
    }
    const year = parseInt(control.value, 10);
    const minYear = 1800;
    const maxYear = 2500;
    if (year >= minYear && year <= maxYear) {
      return null;
    } else {
      return { year: true };
    // OR return an object with min-max values
      return { year: {
        min: minYear,
        max: maxYear
       };
    }
  }

  onSubmit(formValue) {
    console.log(formValue)
  }
}

Building and Providing a Service

media-item.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class MediaItemService {
  mediaItems = [
    {
      id: 1,
      name: 'Title',
      medium: 'Movie',
      category: 'category',
      year: 2000,
      watchedOn: 1294166565384,
      isFavorite: false
    },
    {
      id: 2,
      name: 'Title 2',
      medium: 'Series',
      category: 'category',
      year: 2005,
      watchedOn: 1294166565384,
      isFavorite: false
    }
  ];

  get() {
    return this.mediaItems;
  }

  add(mediaItem) {
    this.mediaItems.push(mediaItem);
  }

  delete(mediaItem) {
    const index = this.mediaItems.indexOf(mediaItem);
    if (index >= 0) {
      this.mediaItems.splice(index, 1);
    }
  }
}

app.module.ts

import { MediaItemService } from './media-item.service';
@NgModule({
  providers: [
    MediaItemService,
  ]
})

Register a Single Instance of the Service at ROOT lvl

media-item.service.ts

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

@Injectable({
  providedIn: 'root'
})
export class MediaItemService {
...
}

app.module.ts

import { MediaItemService } from './media-item.service';
@NgModule({
  providers: [
    
  ]
})

Using the MediaItemList

media-item-list.component.ts

import { Component, OnInit } from '@angular/core';
import { MediaItemService } from './media-item.service';

export class MediaItemList() implements OnInit {

  mediaItems;

  constructor(private mediaItemService: MediaItemService) {}

  ngOnInit() {
    this.mediaItems = this.mediaItemService.get();
  }

  onMediaItemDelete(mediaItem) {
    this.mediaItemService.delete(mediaItem);
  }

}

media-item-form.component.ts

import { OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { MediaItemService } from './media-item.service';

export class MediaItemFormComponent implements OnInit {
  form: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private mediaItemService: MediaItemService
  ) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      medium: this.formBuilder.control('Movies'),
      name: this.formBuilder.control('', Validators.compose([
        Validators.required,
        Validators.pattern('[\\w\\-\\s\\/]+')
      ])),
      category: this.formBuilder.control(''),
      year: this.formBuilder.control('', this.yearValidator)
    });
  }

  yearValidator(control: FormControl) {
    if(control.value.trim().length === 0) {
      return null;
    }
    const year = parseInt(control.value, 10);
    const minYear = 1800;
    const maxYear = 2500;
    if (year >= minYear && year <= maxYear) {
      return null;
    } else {
      return { year: true };
    // OR return an object with min-max values
      return { year: {
        min: minYear,
        max: maxYear
       };
    }
  }

  onSubmit(mediaIem) {
    console.log(mediaIem);
    this.mediaItemService.add(mediaIem)
  }
}

@Inject decorator

app.module.ts

import { MediaItemService } from './media-item.service';

const lookupLists = {
  mediums: ['Movies', 'Series']
}

@NgModule({
  providers: [
    { provide: 'lookupListToken', useValue: lookupLists }
  ]
})

media-item-form.component.ts

import { OnInit, Inject } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { MediaItemService } from './media-item.service';

export class MediaItemFormComponent implements OnInit {
  form: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private mediaItemService: MediaItemService,
    @Inject('lookupListToken') public lookupList
  ) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      medium: this.formBuilder.control('Movies'),
      name: this.formBuilder.control('', Validators.compose([
        Validators.required,
        Validators.pattern('[\\w\\-\\s\\/]+')
      ])),
      category: this.formBuilder.control(''),
      year: this.formBuilder.control('', this.yearValidator)
    });
  }

  yearValidator(control: FormControl) {
    if(control.value.trim().length === 0) {
      return null;
    }
    const year = parseInt(control.value, 10);
    const minYear = 1800;
    const maxYear = 2500;
    if (year >= minYear && year <= maxYear) {
      return null;
    } else {
      return { year: true };
    // OR return an object with min-max values
      return { year: {
        min: minYear,
        max: maxYear
       };
    }
  }

  onSubmit(mediaIem) {
    console.log(mediaIem);
    this.mediaItemService.add(mediaIem)
  }
}

media-item-form.component.html

<form
  [formGroup]="form"
  (ngSubmit)="onSubmit(form.value)">

  <select formControlName="medium" name="medium" id="medium">
    <option *ngFor="let medium of lookupLists.mediums" [value]="medium">{{medium}}</option>
  </select>

  <input
    formControlName="name"
    name="name"
    id="name">
  <div
    *ngIf="form.get('name').hasError('pattern')"
    class="error">
    Name has invalid characters
  </div>

  <input
    formControlName="year"
    name="year"
    id="year">
  <div
    *ngIf="form.get('year').hasError('year')"
    class="error">
    Year must be between 1900 and 2100
  </div>
  <!-- When returining an OBJECT -->
  <div
    *ngIf="form.get('year').errors a yearErrors"
    class="error">
    Year must be between {{ yearErrors.year.min }} and {{ yearErrors.year.max }}
  </div>

  <button type="submit" [disabled]="!form.valid">Save</button>
</form>

Injection Token

provider.ts

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

export const lookupListToken = new InjectionToken('lookupListToken');

export const lookupLists = {
  mediums: ['Movies', 'Series']
}

app.module.ts

import { lookupListToken, lookupLists } from './provider';

@NgModule({
  providers: [
    { provide: lookupListToken, useValue: lookupLists }
  ]
})

media-item-form.component.ts

import { OnInit, Inject } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { MediaItemService } from './media-item.service';
import { lookupListToken, lookupLists } from './provider';

export class MediaItemFormComponent implements OnInit {
  form: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private mediaItemService: MediaItemService,
    @Inject(lookupListToken) public lookupList
  ) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      medium: this.formBuilder.control('Movies'),
      name: this.formBuilder.control('', Validators.compose([
        Validators.required,
        Validators.pattern('[\\w\\-\\s\\/]+')
      ])),
      category: this.formBuilder.control(''),
      year: this.formBuilder.control('', this.yearValidator)
    });
  }

  yearValidator(control: FormControl) {
    if(control.value.trim().length === 0) {
      return null;
    }
    const year = parseInt(control.value, 10);
    const minYear = 1800;
    const maxYear = 2500;
    if (year >= minYear && year <= maxYear) {
      return null;
    } else {
      return { year: true };
    // OR return an object with min-max values
      return { year: {
        min: minYear,
        max: maxYear
       };
    }
  }

  onSubmit(mediaIem) {
    console.log(mediaIem);
    this.mediaItemService.add(mediaIem)
  }
}

media-item-form.component.html

<form
  [formGroup]="form"
  (ngSubmit)="onSubmit(form.value)">

  <select formControlName="medium" name="medium" id="medium">
    <option *ngFor="let medium of lookupLists.mediums" [value]="medium">{{medium}}</option>
  </select>

  <input
    formControlName="name"
    name="name"
    id="name">
  <div
    *ngIf="form.get('name').hasError('pattern')"
    class="error">
    Name has invalid characters
  </div>

  <input
    formControlName="year"
    name="year"
    id="year">
  <div
    *ngIf="form.get('year').hasError('year')"
    class="error">
    Year must be between 1900 and 2100
  </div>
  <!-- When returining an OBJECT -->
  <div
    *ngIf="form.get('year').errors a yearErrors"
    class="error">
    Year must be between {{ yearErrors.year.min }} and {{ yearErrors.year.max }}
  </div>

  <button type="submit" [disabled]="!form.valid">Save</button>
</form>

angular_directive.md

Structural Directives - modify DOM

• '*' syntactic sugar, shorthand pattern for writing the actual syntax
• work with ng-template elements to modify the DOM
• if placed on ng-template it will handle rendering or not the children of the template element

*ngIf

<!-- If mediaItem.watchedOn has a value, then this will evaluate to TRUE and the content within the div will be displayed otherwise not.. -->
<div *ngIf="mediaItem.watchedOn">{{ mediaItem.watchedOn }}</div>

<!-- this will not make it to the DOM if false/null -->
<ng-template [ngIf]="mediaItem.watchedOn">
  <div>{{ mediaItem.watchedOn }}</div>
</ng-template>

*ngFor

app.component.ts

export class AppComponent() {
  mediaItems = [
    {
      id: 1,
      name: 'Title',
      medium: 'Movie',
      category: 'category',
      year: 2000,
      watchedOn: 1294166565384,
      isFavorite: false
    },
    {
      id: 2,
      name: 'Title 2',
      medium: 'Series',
      category: 'category',
      year: 2005,
      watchedOn: 1294166565384,
      isFavorite: false
    }
  ];
}

app.component.html

...
<mw-media-item
  *ngFor="let mediaItem of mediaItems"
  [mediaItem]="mediaItem"
  (delete)="onMediaItemDelete($event)">
</mw-media-item>

Attribute Directive

• change the appearence or behavior of the elements they are attached to
• do not create or remove elements

app.component.html

...
<mw-media-item
  *ngFor="let mediaItem of mediaItems"
  [mediaItem]="mediaItem"
  (delete)="onMediaItemDelete($event)"
  [ngClass]="{ 'medium-movies': mediaItem.medium === 'Movies', 
              'medium-series': mediaItem.medium === 'Series' }">
</mw-media-item>

Cutom Attribute Directive

favorite.directive.ts

import { Directive, HostBinding, HostListener, Input } from '@angular/core';
@Directive({
  selector: '[mwFavorite]'
})
export class FavoriteDirective {
  @HostBinding('class.is-favorite') isFavorite = true;
  @HostBinding('class.is-favorite-hovering') hovering = false;
  @HostListener('mouseenter') onMouseEnter() {
    this.hovering = true;
  }
  @HostListener('mouseleave') onMouseLeave() {
    this.hovering = false;
  }
  // setter method
  @Input() set mwFavorite(value) {
    this.isFavorite = value;
  }
}

media-item.component.html

<h2>{{ mediaItem.name }}</h2>
<div>{{ mediaItem.category }}</div>
<div>{{ mediaItem.year }}</div>
<div>{{ mediaItem.watchedOn }}</div>
<div [mwFavorite]="mediaItem.isFavorite"></div>
<!-- etc.. -->

app.module.ts

import { FavoriteDirective } from './favorite.directive';
@NgModule({
  declarations: [
    FavoriteDirective,
  ]
})

angular_forms.md

Angular Forms

• In-Out
• Change Tracking
• Validators
  • Built-in
  • Custom
  • Async
  • Form Object Representation

1. Template Driven - form logic is crafted in the template markup
2. Model Driven - form logic is crafted in the component class

Template Driven Forms

• Ease of use
• Simple
• Built using FormsModule

app.module.ts

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    FormsModule,
  ]
})

media-item-form.component.html

<form
  #sampleForm="ngForm"
  (ngSubmit)="onSubmit(sampleForm.value)">

  <select ngModel name="medium" id="medium">
    <option value="Movies">Movies</option>
    <option value="Series">Series</option>
  </select>

  <input
    ngModel
    name="name"
    id="name">

  <button type="submit">Save</button>
</form>

media-item-form.component.ts

export class MediaItemFormComponent {
  onSubmit(formValue) {
    console.log(formValue)
  }
}

Model Driven Forms

• Full powered
• Form field contract
• Field validation rules
• Change tracking
• Can be unit tested without any UI layer
• Are built using the ReactiveFormsModule

app.module.ts

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    ReactiveFormsModule,
  ]
})

media-item-form.component.ts

import { OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
export class MediaItemFormComponent implements OnInit {
  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      medium: new FormControl('Movies'),
      name: new FormControl(''),
      category: new FormControl(''),
      year: new FormControl('')
    });
  }

  onSubmit(formValue) {
    console.log(formValue)
  }
}

media-item-form.component.html

<form
  [formGroup]="form"
  (ngSubmit)="onSubmit(form.value)">

  <select formControlName="medium" name="medium" id="medium">
    <option value="Movies">Movies</option>
    <option value="Series">Series</option>
  </select>

  <input
    formControlName="name"
    name="name"
    id="name">

  <button type="submit">Save</button>
</form>

Built-in Validators

media-item-form.component.ts

import { OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
export class MediaItemFormComponent implements OnInit {
  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      medium: new FormControl('Movies'),
      name: new FormControl('', Validators.compose([
        Validators.required,
        Validators.pattern('[\\w\\-\\s\\/]+')
      ])),
      category: new FormControl(''),
      year: new FormControl('')
    });
  }

  onSubmit(formValue) {
    console.log(formValue)
  }
}

media-item-form.component.html

<form
  [formGroup]="form"
  (ngSubmit)="onSubmit(form.value)">

  <select formControlName="medium" name="medium" id="medium">
    <option value="Movies">Movies</option>
    <option value="Series">Series</option>
  </select>

  <input
    formControlName="name"
    name="name"
    id="name">

  <button type="submit" [disabled]="!form.valid">Save</button>
</form>

Custom Validators

media-item-form.component.ts

import { OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
export class MediaItemFormComponent implements OnInit {
  form: FormGroup;

  ngOnInit() {
    this.form = new FormGroup({
      medium: new FormControl('Movies'),
      name: new FormControl('', Validators.compose([
        Validators.required,
        Validators.pattern('[\\w\\-\\s\\/]+')
      ])),
      category: new FormControl(''),
      year: new FormControl('', this.yearValidator)
    });
  }

  yearValidator(control: FormControl) {
    if(control.value.trim().length === 0) {
      return null;
    }
    const year = parseInt(control.value, 10);
    const minYear = 1800;
    const maxYear = 2500;
    if (year >= minYear && year <= maxYear) {
      return null;
    } else {
      return { year: true };
    // OR return an object with min-max values
      return { year: {
        min: minYear,
        max: maxYear
       };
    }
  }

  onSubmit(formValue) {
    console.log(formValue)
  }
}

Error handling

media-item-form.component.html

<form
  [formGroup]="form"
  (ngSubmit)="onSubmit(form.value)">

  <select formControlName="medium" name="medium" id="medium">
    <option value="Movies">Movies</option>
    <option value="Series">Series</option>
  </select>

  <input
    formControlName="name"
    name="name"
    id="name">
  <div
    *ngIf="form.get('name').hasError('pattern')"
    class="error">
    Name has invalid characters
  </div>

  <input
    formControlName="year"
    name="year"
    id="year">
  <div
    *ngIf="form.get('year').hasError('year')"
    class="error">
    Year must be between 1900 and 2100
  </div>
  <!-- When returining an OBJECT -->
  <div
    *ngIf="form.get('year').errors a yearErrors"
    class="error">
    Year must be between {{ yearErrors.year.min }} and {{ yearErrors.year.max }}
  </div>

  <button type="submit" [disabled]="!form.valid">Save</button>
</form>

angular_gh-pages.md

Angular GH-Pages

ng add angular-cli-ghpages

ng deploy --base-href=/REPO_NAME/

angular_gsap.md

npm i gsap @types/gsap

import { DOCUMENT } from '@angular/common';
import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  @ViewChild('secondSection', {static: true}) secondSection: ElementRef<HTMLDivElement>;
  @ViewChild('menu', {static: true}) menu: ElementRef<HTMLDivElement>;
  @ViewChild('menuSecond', {static: true}) menuSecond: ElementRef<HTMLDivElement>;
  @ViewChild('imageFirst', {static: true}) imageFirst: ElementRef<HTMLDivElement>;
  @ViewChild('imageSecond', {static: true}) imageSecond: ElementRef<HTMLDivElement>;
  
  constructor(@Inject(DOCUMENT) private document: Document) {}

  ngOnInit() {
    this.initialAnimations();
    this.initScrollAnimations();
  }

  initScrollAnimations(): void {
    gsap.to(this.imageFirst.nativeElement, {
      scrollTrigger: {
        trigger: this.imageFirst.nativeElement,
        scrub: true,
        start: "90% center",
      } as gsap.plugins.ScrollTriggerInstanceVars,
      duration: 1.1,
      scale: 1.2,
      height: 250,
    });
    gsap.to(this.imageSecond.nativeElement, {
      scrollTrigger: {
        trigger: this.imageSecond.nativeElement,
        scrub: true,
        start: '80% center',
      },
      duration: 1.1,
      scale: 1.2,
      height: 250,
    });
    gsap.to(this.document.querySelector('.heading-1'), {
      scrollTrigger: {
        trigger: this.document.querySelector('.heading-1'),
        scrub: true,
        start: "150% center",
      },
      color: '#fff',
      duration: 1.5,
    });
    gsap.to(this.document.querySelector('.paragraph'), {
      scrollTrigger: {
        trigger: this.document.querySelector('.paragraph'),
        scrub: true,
        start: "150% center",
      },
      color: '#fff',
      duration: 1.5,
    });
    gsap.to(this.document.querySelector('.btn'), {
      scrollTrigger: {
        trigger: this.document.querySelector('.btn'),
        scrub: true,
        start: "150% center",
      },
      color: '#fff',
      duration: 1.5,
    });
    gsap.from(this.document.querySelector('#buy'), {
      scrollTrigger: {
        trigger: this.document.querySelector('#buy'),
        scrub: true,
        toggleClass: 'active',
        start: "top center",
      },
      duration: 1.5,
      y: 40,
      opacity: 0,
    });
    gsap.from(this.document.querySelector('#about'), {
      scrollTrigger: {
        trigger: this.document.querySelector('#about'),
        scrub: true,
        toggleClass: 'active',
        start: "top center",
      },
      duration: 1.5,
      y: 40,
      opacity: 0,
    });
    gsap.from(this.document.querySelector('.box'), {
      scrollTrigger: {
        trigger: this.document.querySelector('.box'),
        scrub: true,
        toggleClass: 'active',
        start: "-10% center",
      },
      duration: 1.5,
      width: 0,
      opacity: 0,
    });
    gsap.from(this.document.querySelector('.info-1__visual img'), {
      scrollTrigger: {
        trigger: this.document.querySelector('.info-1__visual img'),
        scrub: true,
        toggleClass: 'active',
        start: "-60% center",
      },
      duration: 1.5,
      height: 0,
      scale: 1.3,
      opacity: 0,
    });
    gsap.from(this.document.querySelector('.quote'), {
      scrollTrigger: {
        trigger: this.document.querySelector('.quote'),
        scrub: true,
        toggleClass: 'active',
        start: "-60% center",
      },
      duration: 1.5,
      opacity: 0,
    });
    gsap.from(this.document.querySelector('.info-1__visual .heading-2'), {
      scrollTrigger: {
        trigger: this.document.querySelector('.info-1__visual .heading-2'),
        scrub: true,
        toggleClass: 'active',
        start: "-60% center",
      },
      duration: 1.5,
      y: 40,
      opacity: 0,
    });
    gsap.from(this.document.querySelector('.info-1__visual .btn-learn'), {
      scrollTrigger: {
        trigger: this.document.querySelector('.info-1__visual .btn-learn'),
        scrub: true,
        toggleClass: 'active',
        start: "-60% center",
      },
      duration: 1.5,
      y: 40,
      opacity: 0,
    });
  }

  initialAnimations(): void {
    gsap.from(this.menu.nativeElement.childNodes, {
      duration: .5,
      opacity: 0,
      y: -20,
      stagger: 0.2,
      delay: .5
    });
    gsap.from(this.menuSecond.nativeElement.childNodes, {
      duration: .5,
      opacity: 0,
      y: -20,
      stagger: 0.2,
      delay: .8
    });
    gsap.from(this.imageFirst.nativeElement.childNodes, {
      duration: .7,
      opacity: 0,
      y: -30,
      stagger: 0.2,
      delay: .5
    });
    gsap.from(this.imageSecond.nativeElement.childNodes, {
      duration: .7,
      opacity: 0,
      y: -30,
      stagger: 0.2,
      delay: .6
    });
    gsap.from(this.document.querySelector('.heading-1'), {
      duration: .7,
      opacity: 0,
      y: -30,
      stagger: 0.2,
      delay: .6
    });
    gsap.from(this.document.querySelector('.paragraph'), {
      duration: .7,
      opacity: 0,
      y: -30,
      stagger: 0.2,
      delay: .7
    });
    gsap.from(this.document.querySelector('.btn'), {
      duration: .7,
      opacity: 0,
      y: -30,
      stagger: 0.2,
      delay: .7
    });
  }
}

angular_hostlistener_example.md

StackBlitz

import { Component, Input, HostListener, HostBinding } from '@angular/core';

@Component({
  selector: 'header',
  template: `
    <h1
      [ngClass]="{'hdr': !scrolling, 'hdrScroll': scrolling }">
      header {{name}}!
    </h1>`,
  styleUrls: [ './header.component.css' ]
})
export class HeaderComponent  {
  @Input() name: string;
  scrolling: boolean;
  constructor() {
      this.scrolling = false;
    }

  @HostListener('window:scroll', ['$event']) onScrollEvent($event){
   // console.log($event['Window']);
    console.log("scrolling");
    
    if(!this.scrolling) {
      this.scrolling = true;
    }
    
 }
}

  @HostListener('window:scroll', ['$event'])
    onScroll() {
      (window.scrollY + window.innerHeight >= document.body.offsetHeight)
        ? document.querySelector('.rnd').classList.add('tight')
        : document.querySelector('.rnd').classList.remove('tight');
    }

angular_http.md

Http

• service and types to do http work

GET calls

app.module.ts

import { HttpClientModule } from '@angular/common/http';
@NgModule({
  imports: [
    HttpClientModule
  ]
})

media-item.service.ts

import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { map, pipe } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MediaItemService {

  constructor(private http: HttpClient) {}

  get() {
    return this.http.get<MediaItemResponse>('mediaitems')
      .pipe(map(response => { return respones.mediaItems; }));
  }

  add(mediaItem) {
    this.mediaItems.push(mediaItem);
  }

  delete(mediaItem) {

  }
}

interface MediaItem {
  id: number;
  name: string;
  medium: string;
  category: string;
  year: number;
  watchedOn: number;
  isFavorite: boolean;
}

interface MediaItemResponse {
  mediaItems: MediaItem[];
}

media-item-list.component.ts

import { Component, OnInit } from '@angular/core';
import { MediaItemService } from './media-item.service';

export class MediaItemList() implements OnInit {

  mediaItems;

  constructor(private mediaItemService: MediaItemService) {}

  ngOnInit() {
    this.mediaItemService.get()
      .subscribe(mediaItems => {
        this.mediaItems = mediaItems;
      });
  }

  onMediaItemDelete(mediaItem) {
    this.mediaItemService.delete(mediaItem);
  }
}

Using search params in GET calls

media-item.service.ts

import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { map, pipe } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MediaItemService {

  constructor(private http: HttpClient) {}

  get(medium) {
    const getOptions = {
      params: { medium }
    };
    return this.http.get<MediaItemResponse>('mediaitems', getOptions)
      .pipe(
        map((response: MediaItemsResponse) => { return respones.mediaItems; })
      );
  }

  add(mediaItem) {
    this.mediaItems.push(mediaItem);
  }

  delete(mediaItem) {

  }
  
}

interface MediaItem {
  id: number;
  name: string;
  medium: string;
  category: string;
  year: number;
  watchedOn: number;
  isFavorite: boolean;
}

interface MediaItemResponse {
  mediaItems: MediaItem[];
}

media-item-list.component.ts

import { Component, OnInit } from '@angular/core';
import { MediaItemService } from './media-item.service';

export class MediaItemList() implements OnInit {
  medium: '';
  mediaItems: MediaItem[];

  constructor(private mediaItemService: MediaItemService) {}

  ngOnInit() {
    this.getMediaItems(this.medium);
  }

  onMediaItemDelete(mediaItem) {
    this.mediaItemService.delete(mediaItem);
  }

  getMediaItems(medium: string) {
    this.medium = medium;
    this.mediaItemService.get(medium)
      .subscribe(mediaItems => {
        this.mediaItems = mediaItems;
      });
  }
}

Using HttpClient for POST, PUT, DELETE

media-item.service.ts

import { Injectable } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { map, pipe } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MediaItemService {

  constructor(private http: HttpClient) {}

  get(medium) {
    const getOptions = {
      params: { medium }
    };
    return this.http.get<MediaItemResponse>('mediaitems', getOptions)
      .pipe(
        map((response: MediaItemsResponse) => { return respones.mediaItems; })
      );
  }

  add(mediaItem) {
    return this.http.post('mediaitems', mediaItem);
  }

  delete(mediaItem) {
    return this.http.delete(`mediaitems/${mediaItem.id}`);
  }
  
}

interface MediaItem {
  id: number;
  name: string;
  medium: string;
  category: string;
  year: number;
  watchedOn: number;
  isFavorite: boolean;
}

interface MediaItemResponse {
  mediaItems: MediaItem[];
}

media-item-form.component.ts

import { OnInit, Inject } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { MediaItemService } from './media-item.service';
import { lookupListToken, lookupLists } from './provider';

export class MediaItemFormComponent implements OnInit {
  form: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private mediaItemService: MediaItemService,
    @Inject(lookupListToken) public lookupList
  ) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      medium: this.formBuilder.control('Movies'),
      name: this.formBuilder.control('', Validators.compose([
        Validators.required,
        Validators.pattern('[\\w\\-\\s\\/]+')
      ])),
      category: this.formBuilder.control(''),
      year: this.formBuilder.control('', this.yearValidator)
    });
  }

  yearValidator(control: FormControl) {
    if(control.value.trim().length === 0) {
      return null;
    }
    const year = parseInt(control.value, 10);
    const minYear = 1800;
    const maxYear = 2500;
    if (year >= minYear && year <= maxYear) {
      return null;
    } else {
      return { year: true };
    // OR return an object with min-max values
      return { year: {
        min: minYear,
        max: maxYear
       };
    }
  }

  onSubmit(mediaIem) {
    this.mediaItemService.add(mediaIem)
      .subscribe();
  }
}

media-item-list.component.ts

import { Component, OnInit } from '@angular/core';
import { MediaItemService } from './media-item.service';

export class MediaItemList() implements OnInit {
  medium: '';
  mediaItems: MediaItem[];

  constructor(private mediaItemService: MediaItemService) {}

  ngOnInit() {
    this.getMediaItems(this.medium);
  }

  onMediaItemDelete(mediaItem) {
    this.mediaItemService.delete(mediaItem)
      .subscribe(() => {
        this.getMediaItems(this.medium);
      });
  }

  getMediaItems(medium: string) {
    this.medium = medium;
    this.mediaItemService.get(medium)
      .subscribe(mediaItems => {
        this.mediaItems = mediaItems;
      });
  }
}

Http Errors

media-item.service.ts

import { Injectable } from '@angular/core';
import { HttpClientModule, HttpErrorResponse } from '@angular/common/http';
import { map, pipe, catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MediaItemService {

  constructor(private http: HttpClient) {}

  get(medium) {
    const getOptions = {
      params: { medium }
    };
    return this.http.get<MediaItemResponse>('mediaitems', getOptions)
      .pipe(
        map((response: MediaItemsResponse) => { return respones.mediaItems; }),
        catchError(this.handleError);
      );
  }

  add(mediaItem) {
    return this.http.post('mediaitems', mediaItem)
      .pipe(catchError(this.handleError));
  }

  delete(mediaItem) {
    return this.http.delete(`mediaitems/${mediaItem.id}`)
      .pipe(catchError(this.handleError));
  }

  private handleError(error: HttpErrorResponse) {
    console.log(error.message);
    return throwError('Data error occurred, please try again');
  }
  
}

interface MediaItem {
  id: number;
  name: string;
  medium: string;
  category: string;
  year: number;
  watchedOn: number;
  isFavorite: boolean;
}

interface MediaItemResponse {
  mediaItems: MediaItem[];
}

angular_interceptors.md

---

Http Errors

interceptors/http-error.interceptor.ts

import { HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable, throwError as observableThrowError } from "rxjs";
import { catchError } from 'rxjs/operators';

@Injectable()
export class HttpErrorsInterceptor implements HttpInterceptor {
  
  constructor() {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return next.handle(req).pipe(
      catchError((err) => {
        console.log(err);
        return observableThrowError(err);
      })
    )
  }
}

---

Http Headers & Params

interceptors/http-headers.interceptor.ts

import { HttpEvent,
  HttpHandler,
  HttpInterceptor,
  HttpRequest } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable } from "rxjs";

@Injectable()
export class HttpHeadersInterceptor implements HttpInterceptor {
  
  constructor() {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        'x-rapidapi-key': '',
        'x-rapidapi-host': 'rawg-video-games-database.p.rapidapi.com',
      },
      setParams: {
        key: '',
      }
    });
    return next.handle(req);
  }
}

---

App Module

app.module.ts

import ...

@NgModule({
  declarations: [
    ..
  ],
  imports: [
    ...
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpErrorsInterceptor,
      multi: true,
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpHeadersInterceptor,
      multi: true,
    }
  ],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

---

angular_multi_apps.md

Create Project

• create project without apps
  • ng new multiApps --createApplication="false"
  • cd multiApps

Generate First App

• ng generate application gettingStarted
  • Use the ng serve gettingStarted
  • Use the --project flag ng serve --project="gettingStarted"
  • Open the angular.json and locate the defaultProject and change the name of the project to gettingStarted and run ng serve

Generate Second App

• ng generate application exampleApp
  • ng serve exampleApp
  • or ng serve --project="exampleApp"

Build Apps

• ng build --project="gettingStarted"
• ng build --project="exampleApp"

angular_ngrx_example.md

Angular + NgRx + JSON-Server

GitHub

JSON DB

[app_name]/db.json

{
  "cars": [
    {
      "make": "Ford",
      "model": "Fusion Hybrid",
      "year": 2018,
      "color": "black",
      "price": 25000,
      "id": 1
    },
    {
      "make": "Tesla",
      "model": "S",
      "year": 2018,
      "color": "red",
      "price": 125000,
      "id": 2
    }
  ]
}

App State

src/app/app-state.ts

import { Car } from './car-tool/models/car';

export interface AppState {
  cars: Car[];
  editCarId: number;
}

Actions

src/app/car-tool/car.actions.ts

import { createAction, props } from '@ngrx/store';

import { Car } from './models/car';

export const refreshCarsRequest = createAction('[Car] Refresh Cars Request');

export const refreshCarsDone = createAction('[Car] Refresh Cars Done', props<{ cars: Car[] }>());

export const appendCarRequest = createAction('[Car] Append Car Request', props<{ car: Car }>());

export const replaceCarRequest = createAction('[Car] Replace Car Request', props<{ car: Car }>());

export const deleteCarRequest = createAction('[Car] Delete Car Request', props<{ carId: number }>());

export const editCar = createAction('[Car] Edit Car', props<{ carId: number }>());

export const cancelCar = createAction('[Car] Cancel Car');

Reducers

src/app/car-tool/car.reducers.ts

import { createReducer, on } from '@ngrx/store';

import { refreshCarsDone, editCar, cancelCar  } from './car.actions';
import { Car } from './models/car';

export const carsReducer = createReducer<Car[]>([],
  on(refreshCarsDone, (_, action) => action.cars),
);

export const editCarIdReducer = createReducer<number>(-1,
  on(editCar, (_, action) => action.carId),
  on(cancelCar, () => -1),
  on(refreshCarsDone, () => -1),
);

Effects

src/app/car-tool/car.effects.ts

import { Injectable } from '@angular/core';
import { Actions, ofType, createEffect } from '@ngrx/effects';
import { switchMap, map } from 'rxjs/operators';

import { CarsService } from './services/cars.service';
import {
  refreshCarsRequest, refreshCarsDone, appendCarRequest,
  replaceCarRequest, deleteCarRequest
} from './car.actions';

@Injectable()
export class CarEffects {

  constructor(
    private carsSvc: CarsService,
    private actions$: Actions,
  ) {}

  refreshCars$ = createEffect(() => this.actions$.pipe(
    ofType(refreshCarsRequest),
    switchMap(() => {
      return this.carsSvc.all().pipe(
        map(cars => refreshCarsDone({ cars })),
      );
    }),
  ));

  appendCar$ = createEffect(() => this.actions$.pipe(
    ofType(appendCarRequest),
    switchMap((action) => {
      return this.carsSvc.append(action.car).pipe(
        map(() => refreshCarsRequest()),
      );
    }),
  ));

  replaceCar$ = createEffect(() => this.actions$.pipe(
    ofType(replaceCarRequest),
    switchMap((action) => {
      return this.carsSvc.replace(action.car).pipe(
        map(() => refreshCarsRequest()),
      );
    }),
  ));

  deleteCar$ = createEffect(() => this.actions$.pipe(
    ofType(deleteCarRequest),
    switchMap((action) => {
      return this.carsSvc.delete(action.carId).pipe(
        map(() => refreshCarsRequest()),
      );
    }),
  ));
}

App Module

src/app/app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { EffectsModule } from '@ngrx/effects';


import { CarToolModule } from './car-tool/car-tool.module';
import { AppRoutingModule } from './app-routing.module';

import { carsReducer, editCarIdReducer } from './car-tool/car.reducers';
import { CarEffects } from './car-tool/car.effects';


import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    StoreModule.forRoot({
      cars: carsReducer,
      editCarId: editCarIdReducer,
    }),
    EffectsModule.forRoot([ CarEffects ]),
    StoreDevtoolsModule.instrument(),
    CarToolModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Homepage

src/app/app.component.html

<car-home></car-home>

Car-Tool Module

src/app/car-tool/car-tool.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { SharedModule } from '../shared/shared.module';

import { CarHomeComponent } from './components/car-home/car-home.component';
import { CarTableComponent } from './components/car-table/car-table.component';
import { EditCarRowComponent } from './components/edit-car-row/edit-car-row.component';
import { ViewCarRowComponent } from './components/view-car-row/view-car-row.component';
import { CarFormComponent } from './components/car-form/car-form.component';

@NgModule({
  declarations: [
    CarHomeComponent, CarTableComponent, EditCarRowComponent,
    ViewCarRowComponent, CarFormComponent
  ],
  imports: [
    CommonModule, ReactiveFormsModule, HttpClientModule, SharedModule,
  ],
  exports: [CarHomeComponent],
})
export class CarToolModule { }

Car Model

src/app/car-tool/models/car.ts

export interface Car {
  id?: number;
  make: string;
  model: string;
  year: number;
  color: string;
  price: number;
}

Car Service

src/app/car-tool/services/cars.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

import { Car } from '../models/car';

@Injectable({
  providedIn: 'root'
})
export class CarsService {

  _baseUrl = 'http://localhost:4250/cars';

  constructor(private httpClient: HttpClient) { }

  private getCollectionUrl() {
    return this._baseUrl;
  }

  private getElementUrl(elementId: any) {
    return this._baseUrl + '/' + encodeURIComponent(String(elementId));
  }

  all() {
    return this.httpClient.get<Car[]>(this.getCollectionUrl());
  }

  append(car: Car) {
    return this.httpClient.post<Car>(this.getCollectionUrl(), car);
  }

  replace(car: Car) {
    return this.httpClient.put<Car>(this.getElementUrl(car.id), car);
  }

  delete(carId: number) {
    return this.httpClient.delete<Car>(this.getElementUrl(carId));
  }
}

Car Home

src/app/car-tool/components/car-home/car-home.component.ts

import { Component, OnInit } from '@angular/core';
import { Store, select } from '@ngrx/store';

import { AppState } from '../../../app-state';
import { Car } from '../../models/car';
import {
  refreshCarsRequest,
  appendCarRequest,
  replaceCarRequest,
  deleteCarRequest,
  editCar,
  cancelCar
} from '../../car.actions';

@Component({
  selector: 'car-home',
  templateUrl: './car-home.component.html',
  styleUrls: ['./car-home.component.css']
})
export class CarHomeComponent implements OnInit {
  cars$ = this.store.pipe(select(state => state.cars));
  editCarId$ = this.store.pipe(select('editCarId'));

  constructor(private store: Store<AppState>) {}

  ngOnInit() {
    this.store.dispatch(refreshCarsRequest());
  }

  doAppendCar(car: Car) {
    this.store.dispatch(appendCarRequest({ car }));
  }

  doReplaceCar(car: Car) {
    this.store.dispatch(replaceCarRequest({ car }));
  }

  doDeleteCar(carId: number) {
    this.store.dispatch(deleteCarRequest({ carId }));
  }

  doEditCar(carId: number) {
    this.store.dispatch(editCar({ carId }));
  }

  doCancelCar() {
    this.store.dispatch(cancelCar());
  }
}

<tool-header headerText="Car Tool"></tool-header>

<car-table [cars]="cars$ | async" [editCarId]="editCarId$ | async"
  (editCar)="doEditCar($event)"
  (deleteCar)="doDeleteCar($event)"
  (saveCar)="doReplaceCar($event)"
  (cancelCar)="doCancelCar()"></car-table>

<car-form buttonText="Add Car" (submitCar)="doAppendCar($event)"></car-form>

Car Form

src/app/car-tool/components/car-form/car-form.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

import { Car } from '../../models/car';


@Component({
  selector: 'car-form',
  templateUrl: './car-form.component.html',
  styleUrls: ['./car-form.component.css']
})
export class CarFormComponent implements OnInit {

  @Input()
  buttonText = 'Submit Car';

  @Output()
  submitCar = new EventEmitter<Car>();

  carForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.carForm = this.fb.group({
      make: '',
      model: '',
      year: 1900,
      color: '',
      price: 0,
    });
  }

  doSubmitCar() {

    this.submitCar.emit({
      ...this.carForm.value,
    });

    this.carForm.setValue({
      make: '',
      model: '',
      year: 1900,
      color: '',
      price: 0,
    });

  }  

}

<form [formGroup]="carForm">
    <div>
      <label for="make-input">Make:</label>
      <input type="text" id="make-input" formControlName="make">
    </div>
    <div>
      <label for="model-input">Model:</label>
      <input type="text" id="model-input" formControlName="model">
    </div>
    <div>
      <label for="year-input">Year:</label>
      <input type="number" id="year-input" formControlName="year">
    </div>
    <div>
      <label for="color-input">Color:</label>
      <input type="text" id="color-input" formControlName="color">
    </div>
    <div>
      <label for="price-input">Price:</label>
      <input type="number" id="price-input" formControlName="price">
    </div>
    <button (click)="doSubmitCar()">{{buttonText}}</button>
  </form>

Car Table

src/app/car-tool/components/car-table/car-table.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

import { Car } from '../../models/car';

@Component({
  selector: 'car-table',
  templateUrl: './car-table.component.html',
  styleUrls: ['./car-table.component.css'],
})
export class CarTableComponent {

  @Input()
  cars: Car[] = [];

  @Input()
  editCarId = 0;

  @Output()
  editCar = new EventEmitter<number>();

  @Output()
  deleteCar = new EventEmitter<number>();

  @Output()
  saveCar = new EventEmitter<Car>();

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

  doEdit(carId: number) {
    this.editCar.emit(carId);
  }

  doDelete(carId: number) {
    this.deleteCar.emit(carId);
  }

  doSave(car: Car) {
    this.saveCar.emit(car);
  }

  doCancel() {
    this.cancelCar.emit();
  }

}

<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Make</th>
      <th>Model</th>
      <th>Year</th>
      <th>Color</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <ng-container *ngFor="let car of cars">
      <tr class="view-car-row"
        *ngIf="editCarId !== car.id"
        [car]="car" (editCar)="doEdit($event)"
        (deleteCar)="doDelete($event)" ></tr>
      <tr class="edit-car-row"
        *ngIf="editCarId === car.id"
        [car]="car" (saveCar)="doSave($event)"
        (cancelCar)="doCancel()" ></tr>
    </ng-container>
  </tbody>
</table>

View Car Row

src/app/car-tool/components/view-car-row/view-car-row.component.ts

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

import { Car } from '../../models/car';

@Component({
  selector: '.view-car-row',
  templateUrl: './view-car-row.component.html',
  styleUrls: ['./view-car-row.component.css']
})
export class ViewCarRowComponent implements OnInit {

  @Input()
  car: Car = null;

  @Output()
  editCar = new EventEmitter<number>();

  @Output()
  deleteCar = new EventEmitter<number>();

  constructor() { }

  ngOnInit() {
  }

  doEdit() {
    this.editCar.emit(this.car.id);
  }

  doDelete() {
    this.deleteCar.emit(this.car.id);
  }
}

src/app/car-tool/components/view-car-row/view-car-row.component.html

<td>{{car.id}}</td>
<td>{{car.make}}</td>
<td>{{car.model}}</td>
<td>{{car.year}}</td>
<td>{{car.color}}</td>
<td>{{car.price}}</td>
<td>
  <button (click)="doEdit()">Edit</button>
  <button (click)="doDelete()">Delete</button>
</td>

Edit Car Row

src/app/car-tool/components/edit-car-row/edit-car-row.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

import { Car } from '../../models/car';

@Component({
  selector: '.edit-car-row',
  templateUrl: './edit-car-row.component.html',
  styleUrls: ['./edit-car-row.component.css']
})
export class EditCarRowComponent implements OnInit {

  @Input()
  car: Car;

  @Output()
  saveCar = new EventEmitter<Car>();

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

  editCarForm: FormGroup;

  constructor(private fb: FormBuilder) { }

  ngOnInit() {
    this.editCarForm = this.fb.group({
      make: this.car.make,
      model: this.car.model,
      year: this.car.year,
      color: this.car.color,
      price: this.car.price,
    });
  }

  doSave() {
    this.saveCar.emit({
      ...this.editCarForm.value,
      id: this.car.id,
    });
  }

  doCancel() {
    this.cancelCar.emit();
  }

}

src/app/car-tool/components/edit-car-row/edit-car-row.component.html

<ng-container [formGroup]="editCarForm">
  <td>{{car.id}}</td>
  <td><input type="text" formControlName="make"></td>
  <td><input type="text" formControlName="model"></td>
  <td><input type="number" formControlName="year"></td>
  <td><input type="text" formControlName="color"></td>
  <td><input type="number" formControlName="price"></td>
  <td>
    <button (click)="doSave()">Save</button>
    <button (click)="doCancel()">Cancel</button>
  </td>
</ng-container>

angular_pipes.md

Pipes

A template expression operator that takes in a value and returns a new value representation

Built-in Pipes

media-item.component.html

<h2>{{ mediaItem.name | slice: 0:10 | uppercase }}</h2>
<div>{{ mediaItem.watchedOn | date: 'shortDate' }}</div>
<!-- etc.. -->

Custom Pipes

category-list.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'categoryList',
  // stateless(default) or statefull
  pure: true
  // pure: will take in data and return new data, like pure functions
})
export class CategoryListPipe implements PipeTransform {
  transform(mediaItems) {
    const categories = [];
    mediaItems.forEach(mediaItem => {
      if (categories.indexOf(mediaItem.category) <= -1) {
        categories.push(mediaItem.category)
      }
    });
    return categories.join(', ');
  }
}

app.component.html

<header>
  <div>{{ mediaItems | categoryList }}</div>
</header>

<mw-media-item
  *ngFor="let mediaItem of mediaItems"
  [mediaItem]="mediaItem"
  (delete)="onMediaItemDelete($event)"
  [ngClass]="{ 'medium-movies': mediaItem.medium === 'Movies', 
              'medium-series': mediaItem.medium === 'Series' }">
</mw-media-item>

app.module.ts

import { CategoryListPipe } from './category-list.pipe';
@NgModule({
  declarations: [
    CategoryListPipe,
  ]
})

angular_routing.md

Routing

• make sure to have <base href="/"> in the head of index.html

Creating routes and Register in app module

app.routing.ts

import { Routes, RouterModule } from '@angular/router';
import { MediaItemFormComponent } from 'media-item-from.component';
import { MediaItemListComponent } from 'media-item-from.component';

const appRoutes: Routes = [
  { path: 'add', component: MediaItemFormComponent },
  { path: ':medium', component: MediaItemListComponent },
  { path: '', redirectTo: 'all', pathMatch: 'full' }
];

export const routing = RouterModule.forRoot(appRoutes);

app.module.ts

import { routing } from './app.routing';
@NgModule({
  imports: [
    routing
  ]
})

Router Outlets

app.component.html

<router-outlet></router-outlet>

Router Links

app.component.html

<nav>
  <a routerLink="/">home</a>
  <a routerLink="/movies">movies</a>
  <a routerLink="/series">series</a>
  <a routerLink="/add">add</a>
</nav>
<router-outlet></router-outlet>

Route Parameters

media-item-list.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MediaItemService } from './media-item.service';

export class MediaItemList() implements OnInit {
  medium: '';
  mediaItems: MediaItem[];

  constructor(
    private mediaItemService: MediaItemService,
    private activatedRoute: ActivateRoute
    ) {}

  ngOnInit() {
    this.activatedRoute.paramMap
      .subscribe(paramMap => {
        let medium = paramMap.get('medium');
        if (medium.toLowerCase() === 'all') {
          medium = '';
        }
        this.getMediaItems(medium);
      });
  }

  onMediaItemDelete(mediaItem) {
    this.mediaItemService.delete(mediaItem)
      .subscribe(() => {
        this.getMediaItems(this.medium);
      });
  }

  getMediaItems(medium: string) {
    this.medium = medium;
    this.mediaItemService.get(medium)
      .subscribe(mediaItems => {
        this.mediaItems = mediaItems;
      });
  }
}

Using the Router class to navigate

media-item-form.component.ts

import { OnInit, Inject } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
import { MediaItemService } from './media-item.service';
import { lookupListToken, lookupLists } from './provider';
import { Router } from '@angular/router';

export class MediaItemFormComponent implements OnInit {
  form: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private mediaItemService: MediaItemService,
    @Inject(lookupListToken) public lookupList,
    private router: Router
  ) {}

  ngOnInit() {
    this.form = this.formBuilder.group({
      medium: this.formBuilder.control('Movies'),
      name: this.formBuilder.control('', Validators.compose([
        Validators.required,
        Validators.pattern('[\\w\\-\\s\\/]+')
      ])),
      category: this.formBuilder.control(''),
      year: this.formBuilder.control('', this.yearValidator)
    });
  }

  yearValidator(control: FormControl) {
    if(control.value.trim().length === 0) {
      return null;
    }
    const year = parseInt(control.value, 10);
    const minYear = 1800;
    const maxYear = 2500;
    if (year >= minYear && year <= maxYear) {
      return null;
    } else {
      return { year: true };
    // OR return an object with min-max values
      return { year: {
        min: minYear,
        max: maxYear
       };
    }
  }

  onSubmit(mediaIem) {
    this.mediaItemService.add(mediaIem)
      .subscribe(() => {
        router.navigate(['/', mediumItem.medium]);
      });
  }
}

Group Routes into Related Domain Areas

app/new-item/new-item.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { MediaItemFormComponent } from './media-item-form.component';
import { newItemRouting } from './new-item.routing';

@NgModule({
  imports: [
    CommonModule,
    ReactiveFormsModule,
    newItemRouting
  ],
  declarations: [
    MediaItemFormComponent
  ]
})
export class NewItemModule {}

app/new-item/new-item.routing.ts

import { Router } from '@angular/router';
import { MediaItemFormComponent } from './media-item-form.component';

const newItemRoutes: Routes = [
  { path: 'add', component: MediaItemFormComponent }
];

export const newItemRouting = RouterModule.forChild(newItemRoutes);

Refactor app.module.ts

import { NewItemModule } from './new-item/new-item.module';
@NgModule({
  imports: [
    ...
    NewItemModule
  ]
})

app.routing.ts

import { Routes, RouterModule } from '@angular/router';
import { MediaItemListComponent } from 'media-item-from.component';

const appRoutes: Routes = [
  { path: ':medium', component: MediaItemListComponent },
  { path: '', redirectTo: 'all', pathMatch: 'full' }
];

export const routing = RouterModule.forRoot(appRoutes);

Lazyloading Grouped Routes

• remove newItemRouting from app.module.ts

app.routing.ts

import { Routes, RouterModule } from '@angular/router';
import { MediaItemListComponent } from 'media-item-from.component';

const appRoutes: Routes = [
  { path: 'add', loadChildren: () => import('./new-item/new-item.module').then(m => mNewItemModule) },
  { path: ':medium', component: MediaItemListComponent },
  { path: '', redirectTo: 'all', pathMatch: 'full' }
];

export const routing = RouterModule.forRoot(appRoutes);

app/new-item/new-item.routing.ts

import { Router } from '@angular/router';
import { MediaItemFormComponent } from './media-item-form.component';

const newItemRoutes: Routes = [
  { path: '', component: MediaItemFormComponent }
];

export const newItemRouting = RouterModule.forChild(newItemRoutes);

angular_services_ex.md

---

The Service

games.service.ts

import { HttpClient, HttpParams } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { forkJoin, Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { environment } from 'src/environments/environment';
import { APIResponse, Game } from './models';

@Injectable({
  providedIn: 'root'
})
export class GamesService {

  constructor(
    private http: HttpClient
  ) { }

  getGameList(
    ordering: string,
    search?: string)
    : Observable<APIResponse<Game>> {
    let params = new HttpParams().set('ordering', ordering);
    if (search) {
      params = new HttpParams().set('ordering', ordering).set('search', search);
    }

    return this.http.get<APIResponse<Game>>(`${environment.BASE_URL}/games`, {params: params});
  }

  getGameDetails(
    id: string
  ): Observable<Game> {
    const gameInfoReq = this.http.get<Game>(`${environment.BASE_URL}/games/${id}`);
    const gameTrailersReq = this.http.get<Game>(`${environment.BASE_URL}/games/${id}/movies`);
    const gameScreenshotsReq = this.http.get<Game>(`${environment.BASE_URL}/games/${id}/screenshots`);

    return forkJoin({
      gameInfoReq,
      gameTrailersReq,
      gameScreenshotsReq
    }).pipe(
      map((resp: any) => {
        return {
          ...resp['gameInfoReq'],
          screenshots: resp['gameScreenshotsReq'].results,
          trailers: resp['gameTrailersReq'].results
        }
      })
    )
  }
}

---

Usage Example

home/home.component.ts

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Params, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { GamesService } from '../games.service';
import { APIResponse, Game } from '../models';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit, OnDestroy {

  sort!: string;
  games!: Array<Game>;
  private routeSub!: Subscription;
  private gameSub!: Subscription;

  constructor(
    private gameService: GamesService,
    private activateRoute:ActivatedRoute,
    private router: Router,
  ) { }

  ngOnInit(): void {
    this.routeSub = this.activateRoute.params
      .subscribe((params: Params) => {
        if (params['game-search']) {
          this.searchGames('metacritic', params['game-search']);
        } else {
          this.searchGames('metacritic');
        }
      })
  }

  ngOnDestroy(): void {
    if (this.gameSub) this.gameSub.unsubscribe();
    if (this.routeSub) this.routeSub.unsubscribe();
  }

  searchGames(sort: string, search?: string): void {
    this.gameSub = this.gameService
      .getGameList(sort, search)
      .subscribe((gameList: APIResponse<Game>) => {
        this.games = gameList.results;
        // console.log(gameList);
      })
  }

  openGameDetails(id: string): void {
    this.router.navigate(['details', id]);
  }

}

---

Models for Response

models.ts

export interface Game {
  id: string;
  background_image: string;
  name: string;
  released: string;
  description: string;
  metacritic_url: string;
  website: string;
  metacritic: number;
  genres: Array<Genre>;
  parent_platforms: Array<PerentPlatform>;
  publishers: Array<Publishers>;
  ratings: Array<Rating>;
  screenshots: Array<Screenshots>;
  trailers: Array<Trailers>;
}

export interface APIResponse<T> {
  results: Array<T>;
}

export interface PerentPlatform {
  platform: {
    name: string;
    slug: string;
  }
}

export interface Genre {
  name: string;
}

export interface Publishers {
  name: string;
}

export interface Rating {
  id: number;
  count: number;
  title: string;
}

export interface Screenshots {
  image: string;
}

export interface Trailers {
  data: {
    max: string;
  }
}

---

angular_setup.md

Project Basics

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

// metadata
@NgModule({
  // bring in Modules needed
  imports: [
    BrowserModule
  ],
  // Components, Directives, Pipes, Services - available to imported modules
  declarations: [
    AppComponent
  ],
  // entry point for app code
  bootstrap: [
    AppComponent
  ]
})

export class AppModule() {

}

app.component.ts

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

@Component({
  // this can be anything as long as contains at leat one dash
  selector: 'app-root',
  // or 'name-app'
  // HTML: <app-root></app-root> // OR <name-app></name-app>
  template: `
    <h1>App Title</h1>
    <p>Subheading</p>
  `,
  templateUrl: './app.component.html',
  styles: [`
    h1 { color: blue; }
    `],
  styleUrls: ['./app.component.css']
})

export class AppComponent() {

}

Bootstrap the module with main.ts

// because we target a browser app we import platformBrowserDynamic
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module.ts';

platformBrowserDynamic().bootsrapModule(AppModule);

angular_snippets.md

Get Random Doc With Retry

getRandom(): Observable<any> {
    const s = this.rndStr(20);

    const request$ = this.db.collection('movies', 
      ref => ref.where('random', '>=', s)
        .orderBy('random')
        .limit(1))
        .get();

    const retryRequest$ = this.db.collection('movies',
      ref => ref.where('random', '<=', s)
        .orderBy('random', 'desc')
        .limit(1))
        .get();

    const docMap = pipe(
      map((docs: QuerySnapshot<any>) => {
        return docs.docs.map(e => {
          return {
            id: e.id,
            ...e.data()
          } as any;
        });
      })
    );

    const random$ = request$.pipe(docMap).pipe(filter(x => x !== undefined && x[0] !== undefined));

    const retry$ = request$.pipe(docMap).pipe(
      filter(x => x === undefined || x[0] === undefined),
      switchMap(() => retryRequest$),
      docMap
    );
    
    return merge(random$, retry$);
  }

Get Reando Doc with RxJS

getDocumentRandomlyParent(): Observable<any> {
    return this.getDocumentRandomlyChild()
      .pipe(
        expand((document: any) => document === null ? this.getDocumentRandomlyChild() : EMPTY),
      );
  }

  getDocumentRandomlyChild(): Observable<any> {
      const random = this.afs.createId();
      return this.afs
        .collection('my_collection', ref =>
          ref
            .where('random_identifier', '>', random)
            .limit(1))
        .valueChanges()
        .pipe(
          map((documentArray: any[]) => {
            if (documentArray && documentArray.length) {
              return documentArray[0];
            } else {
              return null;
            }
          }),
        );
  }

Add Movie

private dbPath = '/movies';
  movies$: AngularFirestoreCollection<Movie>;



  constructor(
    private http: HttpClient,
    private db: AngularFirestore
  ) {
    this.movies$ = this.db.collection(this.dbPath);
  }

  async getMovieInfo(id, key) {
    let movie = await this.http.get(`https://api.themoviedb.org/3/movie/${id}?api_key=${key}&language=en-US`);
    let trailers = await this.http.get(`https://api.themoviedb.org/3/movie/${id}/videos?api_key=${key}&language=en-US`);

    let source$ = zip(movie.pipe(take(1)), trailers.pipe(take(1)));
    return source$;
  }

  async add(movie: Movie) {
    let checked = await this.getDocByID(movie.tmdb_id);
    if (checked === 0) {
      let added = await this.movies$.doc().set({...movie}, {merge: true})
        .then(() => {return true});
      if (added) return "Movie Added";
    } else {
      return "Movie already in DB";
    }
    
  }

  private async getDocByID(id: number) {
    let check = await this.movies$.ref.where('tmdb_id', '==', id)
      .limit(1)
      .get()
      .then(querySnapshot => {
        return querySnapshot.docs.length
      });
    return check;
  }

  getAll() {
    return this.movies$;
  }

Get Random Titles

private dbPath = '/movies';
  movies$: AngularFirestoreCollection<Movie>;

  constructor(
    private db: AngularFirestore
  ) {
    this.movies$ = this.db.collection(this.dbPath);
  }

  // const indices = getRandomIndices(collection.size);
  // const docs = await Promise.all(indices.map(i => {
  //     return dbRef.startAt(i).limit(1).get();
  // }));

  getRnd(): Observable<any> {
    return this.getRndChild()
      .pipe(
        expand((document: any) => document === null ? this.getRndChild() : EMPTY),
      );
  }

  private getRndChild(): Observable<any> {
    const random = this.rndStr(20);
    return this.db
      .collection('movies', ref =>
        ref
          .where('random', '>', random)
          .limit(1))
      .valueChanges()
      .pipe(
        map((documentArray: any[]) => {
          if (documentArray && documentArray.length) {
            return documentArray;
          } else {
            return null;
          }
        }),
      );
  }

  private rndStr(length) {
    var randomChars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
    var result = '';
    for ( var i = 0; i < length; i++ ) {
        result += randomChars.charAt(Math.floor(Math.random() * randomChars.length));
    }
    return result;
  }

Query by Index

async getRnd() {
    const s = this.shuffledArray(35);
    const r = [];
    s.forEach(async (i) => {
      // console.log(i);
      await this.movies$.ref.where("index", "==", i)
        .get()
        .then((q) => {
          q.forEach((d) => {
            r.push(d.data())
          }) 
        })
        .catch((err) => {
          console.log(err)
        })
    });
    // console.log(r);
    return r;
  }

angular_template_syntax.md

Angular Template Syntax

• Interpolation
• Binding
• Expressions
• Conditional templating
• Template variables
• Template expression variables

---

Interpolations {{ }}

• Nonsupported in {{ }}
  • Assignments
  • Newing up variables
  • Chaning expressions
  • Incrementers / decrementers

media-item.component.html

<h1>{{ name }}</h1>
<div>{{ wasWatched() }}</div>

media-item.component.ts

export class MediaItemComponent() {
  name = "Sample Title";
  wasWatched() {
    return true;
  }
}

---

Property Binding [propertyName] = "templateExpression"

media-item.component.html

<h1 [textContent]="{{ name }}"></h1>

media-item.component.ts

export class MediaItemComponent() {
  name = "Sample Title";
}

---

Event Binding () = "someMethod()"

• native events and custom events

media-item.component.html

<button (click)="onDelete()">Delete</button>

media-item.component.ts

export class MediaItemComponent() {
  onDelete() {
    console.log('deleted!');
  }
}

---

@Input

media-item.component.ts

import { Component, Input } from '@angular/core';
export class MediaItemComponent() {
  @Input() mediaItem;
  // optionally can use custom property name
  @Input('mediaItemToWatch') mediaItem;
}

app.component.ts

export class AppComponent() {
  firstMediaItem = {
    id: 1,
    name: 'Title',
    medium: 'Movie',
    category: 'category',
    year: 2000,
    watchedOn: 1294166565384,
    isFavorite: false
  }
}

app.component.html

...
<mw-media-item [mediaItem]="firstMediaItem"></mw-media-item>
<!-- OR using cutom property name -->
<mw-media-item [mediaItemToWatch]="firstMediaItem"></mw-media-item>

media-item.component.html

<h2>{{ mediaItem.name }}</h2>
<div>{{ mediaItem.category }}</div>
<div>{{ mediaItem.year }}</div>
<div>{{ mediaItem.watchedOn }}</div>
<!-- etc.. -->

---

@Output - expose event bindings on components

media-item.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';
export class MediaItemComponent() {
  @Input() mediaItem;
  @Output() delete = new EventEmitter();
  onDelete() {
    this.delete.emit(this.mediaItem);
  }
}

app.component.ts

export class AppComponent() {
  firstMediaItem = {
    id: 1,
    name: 'Title',
    medium: 'Movie',
    category: 'category',
    year: 2000,
    watchedOn: 1294166565384,
    isFavorite: false
  };

  onMediaItemDelete(mediaItem) {
    // Todo
  }
}

app.component.html

...
<mw-media-item
  [mediaItem]="firstMediaItem"
  (delete)="onMediaItemDelete($event)">
</mw-media-item>

media-item.component.html

<h2>{{ mediaItem.name }}</h2>
<div>{{ mediaItem.category }}</div>
<div>{{ mediaItem.year }}</div>
<div>{{ mediaItem.watchedOn }}</div>
<!-- etc.. -->

---

anuglar_rest_ex.md

Angular REST Frontend

App Structure

.
+-- 📁 app
|   +-- 📁 classes
|       +-- 📜 auth.ts
|   +-- 📁 interceptors
|       +-- 📜 credential.interceptor.ts
|   +-- 📁 interfaces
|       +-- 📜 order-item.ts
|       +-- 📜 order.ts
|       +-- 📜 permission.ts
|       +-- 📜 product.ts
|       +-- 📜 role.ts
|       +-- 📜 user.ts
|   +-- 📁 public
|       +-- 📁 login
|           +-- 📜 login.component.html
|           +-- 📜 login.component.ts
|       +-- 📁 register
|           +-- 📜 register.component.html
|           +-- 📜 register.component.ts
|       +-- 📜 public.component.html
|       +-- 📜 public.component.scss
|       +-- 📜 public.component.ts
|       +-- 📜 public.module.ts
|   +-- 📁 secure
|       +-- 📁 components
|           +-- 📁 paginator
|               +-- 📜 paginator.component.html
|               +-- 📜 paginator.component.scss
|               +-- 📜 paginator.component.ts
|           +-- 📁 upload
|               +-- 📜 upload.component.html
|               +-- 📜 upload.component.scss
|               +-- 📜 upload.component.ts
|       +-- 📁 dashboard
|           +-- 📜 dashboard.component.html
|           +-- 📜 dashboard.component.scss
|           +-- 📜 dashboard.component.ts
|       +-- 📁 menu
|           +-- 📜 menu.component.html
|           +-- 📜 menu.component.ts
|       +-- 📁 nav
|           +-- 📜 nav.component.html
|           +-- 📜 nav.component.ts
|       +-- 📁 orders
|           +-- 📜 orders.component.html
|           +-- 📜 orders.component.scss
|           +-- 📜 orders.component.ts
|       +-- 📁 products
|           +-- 📁 product-create
|               +-- 📜 product-create.component.html
|               +-- 📜 product-create.component.scss
|               +-- 📜 product-create.component.ts
|           +-- 📁 product-edit
|               +-- 📜 product-edit.component.html
|               +-- 📜 product-edit.component.scss
|               +-- 📜 product-edit.component.ts
|           +-- 📜 products.component.html
|           +-- 📜 products.component.scss
|           +-- 📜 products.component.ts
|       +-- 📁 profile
|           +-- 📜 profile.component.html
|           +-- 📜 profile.component.scss
|           +-- 📜 profile.component.ts
|       +-- 📁 roles
|           +-- 📁 role-create
|               +-- 📜 role-create.component.html
|               +-- 📜 role-create.component.scss
|               +-- 📜 role-create.component.ts
|           +-- 📁 role-edit
|               +-- 📜 role-edit.component.html
|               +-- 📜 role-edit.component.scss
|               +-- 📜 role-edit.component.ts
|           +-- 📜 roles.component.html
|           +-- 📜 roles.component.scss
|           +-- 📜 roles.component.ts
|       +-- 📁 users
|           +-- 📁 user-create
|               +-- 📜 user-create.component.html
|               +-- 📜 user-create.component.scss
|               +-- 📜 user-create.component.ts
|           +-- 📁 user-edit
|               +-- 📜 user-edit.component.html
|               +-- 📜 user-edit.component.scss
|               +-- 📜 user-edit.component.ts
|           +-- 📜 users.component.html
|           +-- 📜 users.component.scss
|           +-- 📜 users.component.ts
|       +-- 📜 secure.component.html
|       +-- 📜 secure.component.ts
|       +-- 📜 secure.module.ts
|   +-- 📁 services
|       +-- 📜 auth.service.ts
|       +-- 📜 order.service.ts
|       +-- 📜 permission.sevice.ts
|       +-- 📜 product.service.ts
|       +-- 📜 rest.service.ts
|       +-- 📜 role.service.ts
|       +-- 📜 user.service.ts
|   +-- 📜 app-routing.module.ts
|   +-- 📜 app.component.html
|   +-- 📜 app.component.ts
|   +-- 📜 app.module.ts
+-- 📁 environments
|   +-- 📜 environment.ts
+-- 📜 angular.json

Project Settings

angular.json

{
"angular-admin": {
  "projectType": "application",
  "schematics": {
    "@schematics/angular:component": {
      "style": "scss",
      "skipTests": true, // 😅
      "inlineTemplate": false,
      "inlineStyle": false,
    },
    "@schematics/angular:module": {
      "skipTests": true
    },
    "@schematics/angular:service": {
      "skipTests": true
    }
  }
},
"prefix": "app",  // prefix for components..
}

Custom Event Emitter

• • event emitted in secure.component.ts
  • subscribed in profile.component.ts

classes/auth.ts

import { EventEmitter } from "@angular/core";
import { User } from "../interfaces/user";

export class Auth {
  static userEmitter = new EventEmitter<User>();
}

Interceptors

• adding withCredentials: true to each http request
  • needs to be set in app.module.ts - providers

interceptors/credential.interceptor.ts

import { Injectable } from '@angular/core';
import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor
} from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class CredentialInterceptor implements HttpInterceptor {

  constructor() {}

  intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
    const req = request.clone({
      withCredentials: true
    });
    return next.handle(req);
  }
}

Interfaces

interfaces/order-item.ts

export interface OrderItem {
  id: number;
  product_title: string;
  price: number;
  quantity: number;
}

interfaces/order.ts

import { OrderItem } from "./order-item";

export interface Order {
  id: number;
  name: string;
  email: string;
  total: number;
  order_items: OrderItem[];
}

interfaces/permission.ts

export interface Permission {
  id: number;
  name: string;
}

interfaces/product.ts

export interface Product {
  id: number;
  title: string;
  description: string;
  image: string;
  price: number;
}

interfaces/role.ts

import { Permission } from "./permission";

export interface Role {
  id: number;
  name: string;
  permissions?: Permission[];
}

interfaces/user.ts

import { Role } from "./role";

export interface User {
  id: number;
  first_name: string;
  last_name: string;
  email: string;
  role: Role;
}

Public | Login

public/login/login.component.html

<main class="form-signin">
  <form
    (submit)="submit()"
    [formGroup]="form" >

    <h1 class="h3 mb-3 fw-normal">
      Please signin
    </h1>

    <input
      formControlName="email"
      name="email"
      type="email"
      class="form-control"
      placeholder="Email"
      required >

    <input
      formControlName="password"
      name="password"
      type="password"
      class="form-control"
      placeholder="Password"
      required >
    
    <button
      class="w-100 btn btn-lg btn-primary"
      type="submit" >
        Submit
    </button>
    
  </form>
</main>

public/login/login.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/services/auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['../public.component.scss']
})
export class LoginComponent implements OnInit {

  form!: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private router: Router,
    private authService: AuthService
  ) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      email: '',
      password: ''
    })
  }

  submit() {
    this.authService.login(this.form.getRawValue())
      .subscribe(() => {
        this.router.navigate(['/'])
        
      })
  }
}

Public | Register

public/register/register.component.html

<main class="form-signin">
  <form
    (submit)="submit()" >

    <h1 class="h3 mb-3 fw-normal">
      Please register
    </h1>

    <input
      [(ngModel)]="firstName"
      name="first_name"
      type="text"
      class="form-control"
      placeholder="First Name"
      required >

    <input
      [(ngModel)]="lastName"
      name="last_name"
      type="text"
      class="form-control"
      placeholder="Last Name"
      required >

    <input
      [(ngModel)]="email"
      name="email"
      type="email"
      class="form-control"
      placeholder="Email"
      required >

    <input
      [(ngModel)]="password"
      name="password"
      type="password"
      class="form-control"
      placeholder="Password"
      required >

    <input
      [(ngModel)]="passwordConfirm"
      name="password_confirm"
      type="password"
      class="form-control"
      placeholder="Confirm Password"
      required >
    
    <button
      class="w-100 btn btn-lg btn-primary"
      type="submit" >
        Submit
    </button>
    
  </form>
</main>

public/register/register.component.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from 'src/app/services/auth.service';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['../public.component.scss']
})
export class RegisterComponent {

  firstName = '';
  lastName = '';
  email = '';
  password = '';
  passwordConfirm = '';

  constructor(
    private router: Router,
    private authService: AuthService
  ) { }

  submit(): void {
    this.authService.register({
      first_name: this.firstName,
      last_name: this.lastName,
      email: this.email,
      password: this.password,
      password_confirm: this.passwordConfirm,
    })
    .subscribe(() => this.router.navigate(['/login']))
  }
}

Public Section

public/public.component.html

<router-outlet></router-outlet>

public/public.component.scss

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

public/public.component.ts

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

@Component({
  selector: 'app-public',
  templateUrl: './public.component.html',
  styleUrls: []
})
export class PublicComponent {}

public/public.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PublicComponent } from './public.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
import { RouterModule } from '@angular/router';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';


@NgModule({
  declarations: [
    PublicComponent,
    LoginComponent,
    RegisterComponent
  ],
  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
    HttpClientModule,
    ReactiveFormsModule
  ]
})
export class PublicModule { }

Reusable Components | Paginator

secure/components/paginator/paginator.component.html

<nav>
  <ul class="pagination">
    <li class="page-item">
      <span
        (click)="prev()"
        class="page-link" >
        Previous
      </span>
    </li>
    <li class="page-item">
      <span
        (click)="next()"
        class="page-link" >
        Next
      </span>
    </li>
  </ul>
</nav>

secure/components/paginator/paginator.component.scss

.page-link {
  cursor: pointer;
}

secure/components/paginator/paginator.component.ts

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-paginator',
  templateUrl: './paginator.component.html',
  styleUrls: ['./paginator.component.scss']
})
export class PaginatorComponent {

  page = 1;
  @Input() lastPage!: number;
  @Output() pageChanged = new EventEmitter<number>();

  next(): void {
    if (this.page === this.lastPage) return;
    this.page++;
    this.pageChanged.emit(this.page);
  }

  prev(): void {
    if (this.page === 1) return;
    this.page--;
    this.pageChanged.emit(this.page);
  }
}

Reusable Components | Upload

secure/components/upload/upload.component.html

<label
  class="btn btn-primary">
    Upload
    <input
      (change)="upload($any($event.target).files)"
      type="file"
      name="file"
      hidden >
</label>

secure/components/upload/upload.component.ts

import { HttpClient } from '@angular/common/http';
import { Component, EventEmitter, Output } from '@angular/core';
import { environment } from 'src/environments/environment';

@Component({
  selector: 'app-upload',
  templateUrl: './upload.component.html',
  styleUrls: ['./upload.component.scss']
})
export class UploadComponent {

  @Output() uploaded = new EventEmitter<string>();

  constructor(
    private http: HttpClient
  ) {}
  
  upload(files?: FileList | null): void {
    const file = files?.item(0);
    if (!file) return;
    const data = new FormData();
    data.append('image', file);

    this.http.post(`${environment.api}/upload`, data)
      .subscribe(
        (res: any) => this.uploaded.emit(res.url)
      )
  }
}

Dashboard

• npm i c3 @types/c3

secure/dahsboard/dashboard.component.ts

<h2>Daily Sales</h2>

<div id="chart"></div>

secure/dahsboard/dashboard.component.ts

import { Component, OnInit } from '@angular/core';
import * as c3 from 'c3';
import { OrderService } from 'src/app/services/order.service';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  constructor(
    private orderService: OrderService
  ) { }

  ngOnInit(): void {

    let chart = c3.generate({
      bindto: '#chart',
      data: {
        x: 'x',
        columns: [
          ['x'],
          ['Sales']
        ],
        types: {
          Sales: 'bar'
        }
      },
      axis: {
        x: {
          type: 'timeseries',
          tick: {
            format: '%Y-%m-%d'
          }
        }
      }
    });

    this.orderService.chart()
      .subscribe(
        (res: {date: string, sum: number}[]) => {
          chart.load({
            columns: [
              ['x', ...res.map(r => r.date)],
              ['Sales', ...res.map(r => r.sum)]
            ]
          })
        }
      )
  }
}

Menu

secure/menu/menu.component.html

<nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
  <div class="position-sticky pt-3">
    <ul class="nav flex-column">
      <li class="nav-item">
        <a
          routerLink="/dashboard"
          routerLinkActive="active"
          class="nav-link" >
            <span data-feather="home"></span>
            Dashboard
        </a>
      </li>
      <li class="nav-item">
        <a
          routerLink="users"
          routerLinkActive="active"
          class="nav-link" >
            <span data-feather="home"></span>
            Users
        </a>
      </li>
      <li class="nav-item">
        <a
          routerLink="roles"
          routerLinkActive="active"
          class="nav-link" >
            <span data-feather="home"></span>
            Roles
        </a>
      </li>
      <li class="nav-item">
        <a
          routerLink="products"
          routerLinkActive="active"
          class="nav-link" >
            <span data-feather="home"></span>
            Products
        </a>
      </li>
      <li class="nav-item">
        <a
          routerLink="orders"
          routerLinkActive="active"
          class="nav-link" >
            <span data-feather="home"></span>
            Orders
        </a>
      </li>
    </ul>
  </div>
</nav>

secure/menu/menu.component.ts

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

@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styles: [
  ]
})
export class MenuComponent {}

Nav

secure/nav/nav.component.html

<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
  <a
    class="navbar-brand col-md-3 col-lg-2 me-0 px-3"
    routerLink="/" >
      Company name
  </a>
  
  <nav class="my-w my-md-0 mr-md-3">
    <a
      routerLink="/login"
      class="p-2 text-white text-decoration-none"
      (click)="logout()" >
      Sign Out
    </a>
    <a
      routerLink="/profile"
      class="p-2 text-white text-decoration-none" >
      {{user?.first_name}}
      {{user?.last_name}}
    </a>
  </nav>
</header>

secure/nav/nav.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Auth } from 'src/app/classes/auth';
import { User } from 'src/app/interfaces/user';
import { AuthService } from 'src/app/services/auth.service';

@Component({
  selector: 'app-nav',
  templateUrl: './nav.component.html',
  styles: [
  ]
})
export class NavComponent implements OnInit {

  user!: User;

  constructor(
    private authService: AuthService
  ) { }

  ngOnInit(): void {
    Auth.userEmitter.subscribe(
      user => this.user = user
    )
  }

  logout(): void {
    this.authService.logout().subscribe(() => console.log('Logged out..'))
  }
}

Orders

secure/orders/orders.component.html

<div class="pt-3 pb-2 mb-3 border-bottom">
  <button
    (click)="export()"
    class="btn btn-sm btn-outline-secondary">
    Export CSV
  </button>
</div>

<div class="table-responsive">
  <table class="table table-striped table-sm">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Total</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <ng-container
        *ngFor="let order of orders" >
        <tr>
          <td>{{order.id}}</td>
          <td>{{order.name}}</td>
          <td>{{order.email}}</td>
          <td>{{order.total | currency:"€"}}</td>
          <td>
            <button
              (click)="select(order.id)"
              class="btn btn-sm btn-outline-secondary">
                View
            </button>
          </td>
        </tr>
        <tr>
          <td colspan="5">
            <div
              [@tableState]="itemState(order.id)"
              class="overflow-hidden" >
                <table class="table table-striped table-sm">
                  <thead>
                    <tr>
                      <th>#</th>
                      <th>Product</th>
                      <th>Qty</th>
                      <th>Price</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr
                      *ngFor="let item of order.order_items" >
                      <td>{{item.id}}</td>
                      <td>{{item.product_title}}</td>
                      <td>{{item.quantity}}</td>
                      <td>{{item.price}}</td>
                    </tr>
                  </tbody>
                </table>
            </div>
          </td>
        </tr>
      </ng-container>
    </tbody>
  </table>
</div>

<app-paginator
  [lastPage]="lastPage"
  (pageChanged)="load($event)" >
</app-paginator>

secure/orders/orders.component.ts

import { animate, state, style, transition, trigger } from '@angular/animations';
import { Component, OnInit } from '@angular/core';
import { Order } from 'src/app/interfaces/order';
import { OrderService } from 'src/app/services/order.service';

@Component({
  selector: 'app-orders',
  templateUrl: './orders.component.html',
  styleUrls: ['./orders.component.scss'],
  animations: [
    trigger('tableState', [
      state('show', style({
        maxHeight: '150px'
      })),
      state('hide', style({
        maxHeight: '0'
      })),
      transition('show => hide', animate('500ms ease-in')),
      transition('hide => show', animate('500ms ease-out')),
    ])
  ]
})
export class OrdersComponent implements OnInit {

  orders!: Order[];
  lastPage!: number;
  selected!: number;

  constructor(
    private orderService: OrderService
  ) { }

  ngOnInit(): void {
    this.load();
  }

  load(page: number = 1): void {
    this.orderService.all(page)
      .subscribe(
        res => {
          this.orders = res.data;
          this.lastPage = res.meta.last_page;
        }
      )
  }

  select(id: number): void {
    this.selected = this.selected === id ? 0 : id;
  }

  itemState(id: number): string {
    return this.selected === id? 'show': 'hide';
  }

  export(): void {
    this.orderService.export()
      .subscribe(
        res => {
          const blob = new Blob([res], {type: 'text/csv'});
          const downloadUrl = window.URL.createObjectURL(res);
          const link = document.createElement('a');
          link.href = downloadUrl;
          link.download = 'orders.csv';
          link.click();
        }
      )
  }
}

Products | Product - Create

secure/products/product-create/product-create.component.html

<form
    (submit)="submit()"
    [formGroup]="form" >

    <div class="mb-3">
      <label>Title</label>
      <input
        formControlName="title"
        name="title"
        type="text"
        class="form-control"
        placeholder="Product Title"
        required >
    </div>

    <div class="mb-3">
      <label>Description</label>
      <textarea
        formControlName="description"
        name="description"
        type="text"
        class="form-control"
        required >
      </textarea>
    </div>

    <div class="mb-3">
      <label>Image</label>
      <div class="input-group">
        <input
          formControlName="image"
          name="image"
          type="text"
          class="form-control"
          placeholder="Image Link"
          required >
        <app-upload
          (uploaded)="form.patchValue({image: $event})" >
        </app-upload>
      </div>
      
    </div>

    <div class="mb-3">
      <label>Price</label>
      <input
        formControlName="price"
        name="price"
        type="number"
        class="form-control"
        placeholder="Price"
        required >
    </div>
    
    <button
      class="btn btn-outline-secondary"
      type="submit" >
        Submit
    </button>
    
  </form>

secure/products/product-create/product-create.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { ProductService } from 'src/app/services/product.service';

@Component({
  selector: 'app-product-create',
  templateUrl: './product-create.component.html',
  styleUrls: ['./product-create.component.scss']
})
export class ProductCreateComponent implements OnInit {

  form!: FormGroup

  constructor(
    private formBuilder: FormBuilder,
    private productService: ProductService,
    private router: Router
  ) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      title: '',
      description: '',
      image: '',
      price: 0
    });
  }

  submit() {
    this.productService.create(this.form.getRawValue())
      .subscribe(
        () => this.router.navigate(['/products'])
      )
    
  }
}

Products | Product Edit

secure/products/product-edit/product-edit.component.html

<form
    (submit)="submit()"
    [formGroup]="form" >

    <div class="mb-3">
      <label>Title</label>
      <input
        formControlName="title"
        name="title"
        type="text"
        class="form-control"
        placeholder="Product Title"
        required >
    </div>

    <div class="mb-3">
      <label>Description</label>
      <textarea
        formControlName="description"
        name="description"
        type="text"
        class="form-control"
        required >
      </textarea>
    </div>

    <div class="mb-3">
      <label>Image</label>
      <div class="input-group">
        <input
          formControlName="image"
          name="image"
          type="text"
          class="form-control"
          placeholder="Image Link"
          required >
        <app-upload
          (uploaded)="form.patchValue({image: $event})" >
        </app-upload>
      </div>
      
    </div>

    <div class="mb-3">
      <label>Price</label>
      <input
        formControlName="price"
        name="price"
        type="number"
        class="form-control"
        placeholder="Price"
        required >
    </div>
    
    <button
      class="btn btn-outline-secondary"
      type="submit" >
        Submit
    </button>
    
  </form>

secure/products/product-edit/product-edit.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { ProductService } from 'src/app/services/product.service';

@Component({
  selector: 'app-product-edit',
  templateUrl: './product-edit.component.html',
  styleUrls: ['./product-edit.component.scss']
})
export class ProductEditComponent implements OnInit {

  form!: FormGroup
  id!: number;

  constructor(
    private formBuilder: FormBuilder,
    private productService: ProductService,
    private router: Router,
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      title: '',
      description: '',
      image: '',
      price: 0
    });

    this.id = this.route.snapshot.params.id;

    this.productService.get(this.id)
      .subscribe(
        product => this.form.patchValue({
          title: product.title,
          description: product.description,
          image: product.image,
          price: product.price
        })
      )
  }

  submit() {
    this.productService.update(this.id, this.form.getRawValue())
      .subscribe(
        () => this.router.navigate(['/products'])
      )
    
  }
}

Products

secure/products/products.component.html

<div class="pt-3 pb-2 mb-3 border-bottom">
  <a
    routerLink="/products/create"
    class="btn btn-sm btn-outline-secondary">
    Add Product
  </a>
</div>


<div class="table-responsive">
  <table class="table table-striped table-sm">
    <thead>
      <tr>
        <th>#</th>
        <th>Image</th>
        <th>Title</th>
        <th>Description</th>
        <th>Price</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let product of products">
        <td>{{product.id}}</td>
        <td>
          <img
            [src]="product.image"
            [alt]="product.title"
            height="50" />
        </td>
        <td>{{product.title}}</td>
        <td>{{product.description}}</td>
        <td>{{product.price | currency:"€"}}</td>
        <td>
          <a
            [routerLink]="['/products', product.id, 'edit']"
            class="btn btn-sm btn-outline-secondary">
              Edit
          </a>
          <button
            (click)="delete(product.id)"
            class="btn btn-sm btn-outline-secondary">
              Delete
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<app-paginator
  [lastPage]="lastPage"
  (pageChanged)="load($event)" >
</app-paginator>

secure/products/products.component.ts

import { Component, OnInit } from '@angular/core';
import { Product } from 'src/app/interfaces/product';
import { ProductService } from 'src/app/services/product.service';

@Component({
  selector: 'app-products',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.scss']
})
export class ProductsComponent implements OnInit {

  products!: Product[];
  lastPage!: number;

  constructor(
    private productService: ProductService
  ) { }

  ngOnInit(): void {
    this.load();
  }

  load(page: number = 1): void {
    this.productService.all(page)
      .subscribe(
        (res: any) => {
          this.products = res.data;
          this.lastPage = res.meta.last_page;
        }
      )
  }

  delete(id: number): void {
    if (confirm('Are you sure you want to delete?')) {
      this.productService.delete(id).subscribe(
        () => {
          this.products = this.products.filter(p => p.id !== id);
        }
      )
    }
  }
}

Profile

secure/profile/profile.component.html

<h3>Account Info</h3>

<form
    (submit)="updateInfo()"
    [formGroup]="infoForm" >

    <input
      formControlName="first_name"
      name="first_name"
      type="text"
      class="form-control"
      placeholder="First Name"
      required >

    <input
      formControlName="last_name"
      name="last_name"
      type="text"
      class="form-control"
      placeholder="Last Name"
      required >

    <input
      formControlName="email"
      name="email"
      type="email"
      class="form-control"
      placeholder="Email"
      required >
    
    <button
      class="w-100 btn btn-lg btn-primary"
      type="submit" >
        Save
    </button>
    
  </form>

<form
    (submit)="updatePass()"
    [formGroup]="passForm" >

    <input
      formControlName="password"
      name="password"
      type="password"
      class="form-control"
      placeholder="Password"
      required >

    <input
      formControlName="password_confirm"
      name="password_confirm"
      type="password"
      class="form-control"
      placeholder="Confirm Password"
      required >
    
    <button
      class="w-100 btn btn-lg btn-primary"
      type="submit" >
        Save
    </button>
    
  </form>

secure/profile/profile.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Auth } from 'src/app/classes/auth';
import { AuthService } from 'src/app/services/auth.service';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html',
  styleUrls: ['./profile.component.scss']
})
export class ProfileComponent implements OnInit {

  infoForm!: FormGroup;
  passForm!: FormGroup;

  constructor(
    private formBuilder: FormBuilder,
    private authService: AuthService
  ) { }

  ngOnInit(): void {
    this.infoForm = this.formBuilder.group({
      first_name: '',
      last_name: '',
      email: ''
    });

    this.passForm = this.formBuilder.group({
      password: '',
      password_confirm: ''
    });

    Auth.userEmitter.subscribe(
      user => this.infoForm.patchValue(user)
    )
  }

  updateInfo(): void {
    this.authService.updateInfo(this.infoForm.getRawValue()).subscribe(
      user => Auth.userEmitter.emit(user)
    )
  }

  updatePass(): void {
    this.authService.updatePassword(this.passForm.getRawValue()).subscribe(
      user => Auth.userEmitter.emit(user)
    )
  }
}

Roles | Role Create

secure/roles/role-create/role-create.component.html

<form
  (submit)="submit()"
  [formGroup]="form" >

  <div class="mb-3">
    <label>Role</label>
    <input
      formControlName="name"
      name="name"
      type="text"
      class="form-control"
      placeholder="Role"
      required >
  </div>

  <div
    formArrayName="permissions"
    class="mb-3 row" >
      <label class="col-sm-2 col-form-label">Permission</label>
      <div class="col-sm-10">
        <div
          *ngFor="let permission of permissions; let i = index"
          [formGroupName]="i"
          class="form-check form-check-inline col-3" >
          <input
            formControlName="value"
            name="value"
            type="checkbox"
            class="form-check-input" >
          <label
            for="value"
            class="form-check-label">
              {{permission.name}}
          </label>
        </div>
      </div>
  </div>
  
  <button
    class="btn btn-outline-secondary"
    type="submit" >
      Submit
  </button>
  
</form>

secure/roles/role-create/role-create.component.ts

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { Permission } from 'src/app/interfaces/permission';
import { PermissionService } from 'src/app/services/permission.service';
import { RoleService } from 'src/app/services/role.service';

@Component({
  selector: 'app-role-create',
  templateUrl: './role-create.component.html',
  styleUrls: ['./role-create.component.scss']
})
export class RoleCreateComponent implements OnInit {

  form!: FormGroup;
  permissions!: Permission[];

  constructor(
    private formBuilder: FormBuilder,
    private permService: PermissionService,
    private roleService: RoleService,
    private router: Router
  ) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      name: '',
      permissions: this.formBuilder.array([])
    });

    this.permService.all()
      .subscribe(
        permissions => {
          this.permissions = permissions;
          this.permissions.forEach(p => {
            this.permissionsArray.push(
              this.formBuilder.group({
                value: false,
                id: p.id
              })
            )
          })
        }
      )
  }

  get permissionsArray(): FormArray {
    return this.form.get('permissions') as FormArray;
  }

  submit():void {
    const formData = this.form.getRawValue();
    const data = {
      name: formData.name,
      permissions: formData.permissions.filter((p: { value: boolean; }) => p.value === true).map((p: { id: any; }) => p.id)
    };

    this.roleService.create(data)
      .subscribe(
        () => this.router.navigate(['/roles'])
      )
  }
}

Roles | Role-Edit

secure/roles/role-edit/role-edit.component.html

<form
  (submit)="submit()"
  [formGroup]="form" >

  <div class="mb-3">
    <label>Role</label>
    <input
      formControlName="name"
      name="name"
      type="text"
      class="form-control"
      placeholder="Role"
      required >
  </div>

  <div
    formArrayName="permissions"
    class="mb-3 row" >
      <label class="col-sm-2 col-form-label">Permission</label>
      <div class="col-sm-10">
        <div
          *ngFor="let permission of permissions; let i = index"
          [formGroupName]="i"
          class="form-check form-check-inline col-3" >
          <input
            formControlName="value"
            name="value"
            type="checkbox"
            class="form-check-input" >
          <label
            for="value"
            class="form-check-label">
              {{permission.name}}
          </label>
        </div>
      </div>
  </div>
  
  <button
    class="btn btn-outline-secondary"
    type="submit" >
      Submit
  </button>
  
</form>

secure/roles/role-edit/role-edit.component.ts

import { Component, OnInit } from '@angular/core';
import { FormArray, FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { Permission } from 'src/app/interfaces/permission';
import { Role } from 'src/app/interfaces/role';
import { PermissionService } from 'src/app/services/permission.service';
import { RoleService } from 'src/app/services/role.service';

@Component({
  selector: 'app-role-edit',
  templateUrl: './role-edit.component.html',
  styleUrls: ['./role-edit.component.scss']
})
export class RoleEditComponent implements OnInit {

  form!: FormGroup;
  permissions!: Permission[];
  id!: number;

  constructor(
    private formBuilder: FormBuilder,
    private permService: PermissionService,
    private roleService: RoleService,
    private router: Router,
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      name: '',
      permissions: this.formBuilder.array([])
    });

    this.permService.all()
      .subscribe(
        permissions => {
          this.permissions = permissions;
          this.permissions.forEach(p => {
            this.permissionsArray.push(
              this.formBuilder.group({
                value: false,
                id: p.id
              })
            )
          })
        }
      );
    
      this.id = this.route.snapshot.params.id;

      this.roleService.get(this.id)
        .subscribe(
          (role: Role) => {
            const values = this.permissions.map(p => {
              return {
                value: role.permissions?.some(r => r.id === p.id),
                id: p.id
              }
            });
            this.form.patchValue({
              name: role.name,
              permissions: values
            });
          }
        )
  }

  get permissionsArray(): FormArray {
    return this.form.get('permissions') as FormArray;
  }

  submit():void {
    const formData = this.form.getRawValue();
    const data = {
      name: formData.name,
      permissions: formData.permissions.filter((p: { value: boolean; }) => p.value === true).map((p: { id: any; }) => p.id)
    };

    this.roleService.update(this.id, data)
      .subscribe(
        () => this.router.navigate(['/roles'])
      )
  }
}

Roles

secure/roles/roles.component.html

<div class="pt-3 pb-2 mb-3 border-bottom">
  <a
    routerLink="/roles/create"
    class="btn btn-sm btn-outline-secondary">
    Create Roll
  </a>
</div>

<div class="table-responsive">
  <table class="table table-striped table-sm">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let role of roles">
        <td>{{role.id}}</td>
        <td>{{role.name}}</td>
        <td>
          <a
            [routerLink]="['/roles', role.id, 'edit']"
            class="btn btn-sm btn-outline-secondary">
              Edit
          </a>
          <button
            (click)="delete(role.id)"
            class="btn btn-sm btn-outline-secondary">
              Delete
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

secure/roles/roles.component.ts

import { Component, OnInit } from '@angular/core';
import { Role } from 'src/app/interfaces/role';
import { RoleService } from 'src/app/services/role.service';

@Component({
  selector: 'app-roles',
  templateUrl: './roles.component.html',
  styleUrls: ['./roles.component.scss']
})
export class RolesComponent implements OnInit {

  roles!: Role[];

  constructor(
    private roleService: RoleService
  ) { }

  ngOnInit(): void {
    this.load();
  }

  load(): void {
    this.roleService.all()
      .subscribe(
        roles => this.roles = roles
      )
  }

  delete(id: number): void {
    if (confirm('Are you sure you want to delete?')) {
      this.roleService.delete(id).subscribe(
        () => {
          this.roles = this.roles.filter(u => u.id !== id);
        }
      )
    }
  }
}

User | User-Create

secure/users/user-create/user-create.component.html

<form
  (submit)="submit()"
  [formGroup]="form" >

  <div class="mb-3">
    <label>First Name</label>
    <input
      formControlName="first_name"
      name="firstName"
      type="text"
      class="form-control"
      placeholder="First Name"
      required >
  </div>

  <div class="mb-3">
    <label>Last Name</label>
    <input
      formControlName="last_name"
      name="lastName"
      type="text"
      class="form-control"
      placeholder="Last Name"
      required >
  </div>

  <div class="mb-3">
    <label>Email</label>
    <input
      formControlName="email"
      name="email"
      type="email"
      class="form-control"
      placeholder="Email"
      required >
  </div>

  <div class="mb-3">
    <label>Role</label>
    <select
      formControlName="role_id"
      name="role_id"
      class="form-control">
        <option
          *ngFor="let role of roles"
          [ngValue]="role.id" >
            {{role.name}}
        </option>
    </select>
  </div>
  
  <button
    class="w-100 btn btn-lg btn-primary"
    type="submit" >
      Submit
  </button>
  
</form>

secure/users/user-create/user-create.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Router } from '@angular/router';
import { Role } from 'src/app/interfaces/role';
import { RoleService } from 'src/app/services/role.service';
import { UserService } from 'src/app/services/user.service';

@Component({
  selector: 'app-user-create',
  templateUrl: './user-create.component.html',
  styleUrls: ['./user-create.component.scss']
})
export class UserCreateComponent implements OnInit {

  form!: FormGroup;
  roles!: Role[]; 

  constructor(
    private formBuilder: FormBuilder,
    private roleService: RoleService,
    private userService: UserService,
    private router: Router
  ) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      first_name: '',
      last_name: '',
      email: '',
      role_id: ''
    });

    this.roleService.all().subscribe(
      res => this.roles = res
    );
  }

  submit() {
    this.userService.create(this.form.getRawValue()).subscribe(
      () => this.router.navigate(['/users'])
    )
  }
}

Users | User-Edit

secure/users/user-edit/user-edit.component.html

<form
  (submit)="submit()"
  [formGroup]="form" >

  <div class="mb-3">
    <label>First Name</label>
    <input
      formControlName="first_name"
      name="firstName"
      type="text"
      class="form-control"
      placeholder="First Name"
      required >
  </div>

  <div class="mb-3">
    <label>Last Name</label>
    <input
      formControlName="last_name"
      name="lastName"
      type="text"
      class="form-control"
      placeholder="Last Name"
      required >
  </div>

  <div class="mb-3">
    <label>Email</label>
    <input
      formControlName="email"
      name="email"
      type="email"
      class="form-control"
      placeholder="Email"
      required >
  </div>

  <div class="mb-3">
    <label>Role</label>
    <select
      formControlName="role_id"
      name="role_id"
      class="form-control">
        <option
          *ngFor="let role of roles"
          [ngValue]="role.id" >
            {{role.name}}
        </option>
    </select>
  </div>
  
  <button
    class="w-100 btn btn-lg btn-primary"
    type="submit" >
      Submit
  </button>
  
</form>

secure/users/user-edit/user-edit.component.ts

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
import { Role } from 'src/app/interfaces/role';
import { RoleService } from 'src/app/services/role.service';
import { UserService } from 'src/app/services/user.service';

@Component({
  selector: 'app-user-edit',
  templateUrl: './user-edit.component.html',
  styleUrls: ['./user-edit.component.scss']
})
export class UserEditComponent implements OnInit {

  form!: FormGroup;
  roles!: Role[]; 
  id!: number;

  constructor(
    private formBuilder: FormBuilder,
    private roleService: RoleService,
    private userService: UserService,
    private router: Router,
    private route: ActivatedRoute
  ) { }

  ngOnInit(): void {
    this.form = this.formBuilder.group({
      first_name: '',
      last_name: '',
      email: '',
      role_id: ''
    });

    this.roleService.all().subscribe(
      res => this.roles = res
    );

    this.id = this.route.snapshot.params.id;

    this.userService.get(this.id)
      .subscribe(
        user => {
          this.form.patchValue({
            first_name: user.first_name,
            last_name: user.last_name,
            email: user.email,
            role_id: user.role.id
          });
        }
      )
  }

  submit(): void {
    this.userService.update(this.id, this.form.getRawValue())
      .subscribe(
        () => this.router.navigate(['/users'])
      )
  }
}

Users

secure/users/users.component.html

<div class="pt-3 pb-2 mb-3 border-bottom">
  <a
    routerLink="/users/create"
    class="btn btn-sm btn-outline-secondary">
    Add User
  </a>
</div>

<div class="table-responsive">
  <table class="table table-striped table-sm">
    <thead>
      <tr>
        <th>#</th>
        <th>Name</th>
        <th>Email</th>
        <th>Role</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let user of users">
        <td>{{user.id}}</td>
        <td>{{user.first_name}} {{user.last_name}}</td>
        <td>{{user.email}}</td>
        <td>{{user.role.name}}</td>
        <td>
          <a
            [routerLink]="['/users', user.id, 'edit']"
            class="btn btn-sm btn-outline-secondary">
              Edit
          </a>
          <button
            (click)="delete(user.id)"
            class="btn btn-sm btn-outline-secondary">
              Delete
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<app-paginator
  [lastPage]="lastPage"
  (pageChanged)="load($event)" >
</app-paginator>

secure/users/users.component.ts

import { Component, OnInit } from '@angular/core';
import { User } from 'src/app/interfaces/user';
import { UserService } from 'src/app/services/user.service';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})
export class UsersComponent implements OnInit {

  users!: User[];
  lastPage!: number;

  constructor(
    private userService: UserService
  ) { }

  ngOnInit(): void {
    this.load();
  }

  load(page: number = 1): void {
    this.userService.all(page)
      .subscribe(
        (res: any) => {
          this.users = res.data;
          this.lastPage = res.meta.last_page;
        }
      )
  }

  delete(id: number): void {
    if (confirm('Are you sure you want to delete?')) {
      this.userService.delete(id).subscribe(
        () => {
          this.users = this.users.filter(u => u.id !== id);
        }
      )
    }
  }
}

Secure

secure/secure.component.html

<app-nav></app-nav>

<div class="container-fluid">
  <div class="row">
    
    <app-menu></app-menu>

    <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
      
      <router-outlet></router-outlet>

    </main>
  </div>
</div>

secure/secure.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { Auth } from '../classes/auth';
import { AuthService } from '../services/auth.service';

@Component({
  selector: 'app-secure',
  templateUrl: './secure.component.html',
  styles: []
})
export class SecureComponent implements OnInit {

  constructor(
    private authService: AuthService,
    private router: Router
  ) { }

  ngOnInit(): void {
    this.authService.user().subscribe(
      user => Auth.userEmitter.emit(user),
      () => this.router.navigate(['/login'])
    );
  }
}

secure/secure.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SecureComponent } from './secure.component';
import { MenuComponent } from './menu/menu.component';
import { NavComponent } from './nav/nav.component';
import { RouterModule } from '@angular/router';
import { ProfileComponent } from './profile/profile.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UsersComponent } from './users/users.component';
import { UserCreateComponent } from './users/user-create/user-create.component';
import { UserEditComponent } from './users/user-edit/user-edit.component';
import { RolesComponent } from './roles/roles.component';
import { RoleCreateComponent } from './roles/role-create/role-create.component';
import { RoleEditComponent } from './roles/role-edit/role-edit.component';
import { ProductsComponent } from './products/products.component';
import { PaginatorComponent } from './components/paginator/paginator.component';
import { ProductCreateComponent } from './products/product-create/product-create.component';
import { ProductEditComponent } from './products/product-edit/product-edit.component';
import { UploadComponent } from './components/upload/upload.component';
import { OrdersComponent } from './orders/orders.component';

@NgModule({
  declarations: [
    SecureComponent,
    MenuComponent,
    NavComponent,
    ProfileComponent,
    DashboardComponent,
    UsersComponent,
    UserCreateComponent,
    UserEditComponent,
    RolesComponent,
    RoleCreateComponent,
    RoleEditComponent,
    ProductsComponent,
    PaginatorComponent,
    ProductCreateComponent,
    ProductEditComponent,
    UploadComponent,
    OrdersComponent
  ],
  imports: [
    CommonModule,
    RouterModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SecureModule { }

Services

services/rest.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export abstract class RestService {

  abstract get endpoint(): string;

  constructor(
    protected http:HttpClient
  ) { }

  all(page?: number): Observable<any> {
    let url = this.endpoint;
    if (page) url += `?page=${page}`;
    return this.http.get<any>(url);
  }

  create(data: any): Observable<any> {
    return this.http.post(this.endpoint, data)
  }

  get(id: number): Observable<any> {
    return this.http.get(`${this.endpoint}/${id}`);
  }

  update(id: number, data: any): Observable<any> {
    return this.http.put(`${this.endpoint}/${id}`, data);
  }

  delete(id: number): Observable<void> {
    return this.http.delete<void>(`${this.endpoint}/${id}`);
  }
}

services/auth.service.ts

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { User } from '../interfaces/user';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(
    protected http: HttpClient,
  ) { }

  login(data: any): Observable<any> {
    return this.http.post(`${environment.api}/login`, data)
  }

  register(data: any): Observable<User> {
    return this.http.post<User>(`${environment.api}/register`, data)
  }

  user(): Observable<User> {
    return this.http.get<User>(`${environment.api}/user`)
  }

  logout(): Observable<void> {
    return this.http.post<void>(`${environment.api}/logout`, {})
  }

  updateInfo(data: any): Observable<User> {
    return this.http.put<User>(`${environment.api}/users/info`, data)
  }

  updatePassword(data: any): Observable<User> {
    return this.http.put<User>(`${environment.api}/users/password`, data)
  }
}

services/.service.ts

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { RestService } from './rest.service';

@Injectable({
  providedIn: 'root'
})
export class OrderService extends RestService {

  endpoint = `${environment.api}/orders`;

  export(): Observable<any> {
    return this.http.post(`${environment.api}/export`, {}, {responseType: 'blob'})
  }

  chart(): Observable<any> {
    return this.http.get(`${environment.api}/chart`)
  }
}

services/permission.service.ts

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { RestService } from './rest.service';

@Injectable({
  providedIn: 'root'
})
export class PermissionService extends RestService {

  endpoint = `${environment.api}/permissions`
  
}

services/product.service.ts

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { RestService } from './rest.service';

@Injectable({
  providedIn: 'root'
})
export class ProductService extends RestService {

  endpoint = `${environment.api}/products`
  
}

services/role.service.ts

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { RestService } from './rest.service';

@Injectable({
  providedIn: 'root'
})
export class RoleService extends RestService {

  endpoint= `${environment.api}/roles`;

}

services/user.service.ts

import { Injectable } from '@angular/core';
import { environment } from 'src/environments/environment';
import { RestService } from './rest.service';

@Injectable({
  providedIn: 'root'
})
export class UserService extends RestService {

  endpoint= `${environment.api}/users`;

}

App Routing

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './public/login/login.component';
import { PublicComponent } from './public/public.component';
import { RegisterComponent } from './public/register/register.component';
import { DashboardComponent } from './secure/dashboard/dashboard.component';
import { OrdersComponent } from './secure/orders/orders.component';
import { ProductCreateComponent } from './secure/products/product-create/product-create.component';
import { ProductEditComponent } from './secure/products/product-edit/product-edit.component';
import { ProductsComponent } from './secure/products/products.component';
import { ProfileComponent } from './secure/profile/profile.component';
import { RoleCreateComponent } from './secure/roles/role-create/role-create.component';
import { RoleEditComponent } from './secure/roles/role-edit/role-edit.component';
import { RolesComponent } from './secure/roles/roles.component';
import { SecureComponent } from './secure/secure.component';
import { UserCreateComponent } from './secure/users/user-create/user-create.component';
import { UserEditComponent } from './secure/users/user-edit/user-edit.component';
import { UsersComponent } from './secure/users/users.component';

const routes: Routes = [
  {
    path: '',
    component: SecureComponent,
    children: [
      { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
      { path: 'dashboard', component: DashboardComponent },
      { path: 'profile', component: ProfileComponent },
      { path: 'users', component: UsersComponent },
      { path: 'users/create', component: UserCreateComponent },
      { path: 'users/:id/edit', component: UserEditComponent },
      { path: 'roles', component: RolesComponent },
      { path: 'roles/create', component: RoleCreateComponent },
      { path: 'roles/:id/edit', component: RoleEditComponent },
      { path: 'products', component: ProductsComponent },
      { path: 'products/create', component: ProductCreateComponent },
      { path: 'products/:id/edit', component: ProductEditComponent },
      { path: 'orders', component: OrdersComponent },
    ]
  },
  {
    path: '',
    component: PublicComponent,
    children: [
      { path: 'login', component: LoginComponent },
      { path: 'register', component: RegisterComponent }
    ]
  },
  
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

app.component.html

<router-outlet></router-outlet>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {}

app.module.ts

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CredentialInterceptor } from './interceptors/credential.interceptor';
import { PublicModule } from './public/public.module';
import { SecureModule } from './secure/secure.module';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    SecureModule,
    PublicModule,
    BrowserAnimationsModule
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: CredentialInterceptor,
      multi: true
    }
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }