Maximilian - Angular - The Complete Guide (2021 Edition)

ng new <project> --no-strict
ng serve --host 0.0.0.0 --disable-host-check
ng serve --host 0.0.0.0 --disable-host-check --port 4200
ng serve --host 0.0.0.0 --disable-host-check --port 4201
npm install --save bootstrap@3
add path to bootstrap.css in angular.json
ng g c <component> --spec false skip tests old
ng g c <component> --skipTests true skip tests old
Lifecycle
- ngOnChanges: Called after a bound input property changes
- ngOnInit: Called once the component is initialized
- ngDoCheck: Called during every change detection run
- ngAfterContentInit: Called after content (ng-content) has been projected into view
- ngAfterContentChecked: Called every time the projected content has been checked
- ngAfterViewInit: Called after the component’s view (and child views) has been initialized
- ngAfterViewChecked: Called every time the view (and child views) have been checked
- ngOnDestroy: Called once the component is about to be destroyed
ng g d <directive>
(<FormArray>this.recipeForm.get('ingredients')).clear();
ng g p <pipe>
npm install --save @ngrx/store
npm install --save @ngrx/effects
npm install --save-dev @ngrx/store-devtools
npm install --save @ngrx/router-store
Angular Universal
ng add @nguniversal/express-engine --clientProject <projectname>
version < 9
- npm install –save @nguniversal/module-map-ngfactory-loader
- in app.server.module.ts
  - import { ModuleMapLoaderModule } from ‘@nguniversal/module-map-ngfactory-loader’
version > 12
- ng add @nguniversal/express-engine
- npm run dev:ssr
NestJS
- ng add @nestjs/ng-universal
Progressive Web Apps (PWA)
- ng add @angular/pwa
VSCode Extensions
- Material Icons Theme
- Angular Essentials John papa
ng add @angular/material
npm i @angular/cdk
ng g @angular/material:nav main-nav
ng new angular-shop --create-application=false
Typescript
- npm i -g typescript
- npx tsc <filename.ts>
- npx tsc --init
npm init -y
``
``
``
``
``
``

Observables

import { Component, OnDestroy, OnInit } from '@angular/core';

import { interval, Observable, Subscription } from 'rxjs';

import { map, filter } from 'rxjs/operators'

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

  private firstObsSubscription: Subscription;

  constructor() { }

  ngOnInit() {
    //this.firstObsSubscription = interval(1000).subscribe((count) => {
    //  console.log(count)
    //})
    const customInternalObservable = Observable.create(observer => {
      let count = 0
      setInterval(() => {
        observer.next(count)
        if (count == 2){
          observer.complete()
        }
        if (count > 3){
          observer.error(new Error('Count is greater 3!'))
        }
        count++
      }, 1000)
    })
    
    this.firstObsSubscription = customInternalObservable
    .pipe(
      filter((data:number) => {
        return data > 1
      }), 
      map((data: number) => {
        return 'Round: ' + (data+1)
      })
    ).subscribe((count) => {
      console.log(count)
    }, error => {
      console.log(error)
    }, () => {
      console.log('completed')
    })
  }

  ngOnDestroy(){
    this.firstObsSubscription.unsubscribe()
  }

}

Carlos Aguni