current version: 12 - Date: Oct 2021

Bootstrapping

Bootstraps the app, using the root component from the specified NgModule.

import { platformBrowserDynamic }
    from '@angular/platform-browser-dynamic';

platformBrowserDynamic()
    .bootstrapModule(AppModule);

NgModule

Defines a module that contains components, directives, pipes, and providers.

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

@NgModule({
    declarations: [
        MyRootComponent, 
        MyComponent, 
        MyDirective, 
        MyPipe],
    imports: [MyModule, NpmModule],
    exports: [MyComponent],
    providers: [MyService],
    bootstrap: [MyRootComponent] // Only root module
})
class MyModule {}

Parameter	Function
declarations	Components to this module
imports	Modules to import into this module
exports	Components visible to another module
providers	Dependency injection providers
bootstrap	The root component of module

The pipes and directive is declared as components

Class Type

Component

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

Directive

@Directive({
    selector: ['appMy'],
    templateUrl: './my.directive.html',
    styleUrls: ['./my.directive.css']
})
class MyDirective() {}

Pipe

@Pipe({name: 'myPipe'})
class MyPipe() {}

Provider

@Injectable()
class MyService() {}

Add {providedIn: root} option for create singleton

Component interaction

Input and Output

export class InventoryComponent {
  @Input() hero: Hero;
  @Input('newItem') itemToInsert: Item;

  @Output() itemSelectionned = 
    new EventEmitter<Item>();

    onClickHero(item: Item) {
        this.itemSelectionned.emit(item);
    }
}

Template syntax

Data direction	Syntax
DataSource => Target	{{expression}}
DataSource => Target	[target]="expression"
Target => DataSource	(target)="statement"
Two-way	[(target)]="expression"

ngIf


<span *ngIf="hero; else noHero">{{ hero.name }} exists !</span>
<ng-template #noHero>No hero found :'(</ng-template>

ngFor


<span *ngFor="let hero of heroes; let i=index">{{ hero.name }} is at index {{ i }}</span>

ngSwitch

<div [ngSwitch]="hero.class">
  <span *ngSwitchCase="'knight'">You are strong</span>
  <span *ngSwitchCase="'mage'">You are intelligent</span>
  <span *ngSwitchDefault>You are special</span>
</div>

Basic HTTP Request

HTTP request need to import ONLY ONE TIME HttpClientModule.

import {Http} from "@angular/http";
import "rxjs/add/operator/map";

this.http.post(environment.apiAddress + "/api-method", myJsonData)
      .map(resp=>resp.json());

Sources

Angular module: http://www.learn-angular.fr/les-modules-angular/

Template syntax: https://angular.io/guide/template-syntax

Observable

Function	Effect
take(fn(Int))	Event only if int value result
map(fn(value))	Affect value on each event
filter(fn(value))	Ignore event when return false
reduce(fn(oldValue), value)	Compact event

Simple observable with external observer

const myObservable = Observable.of(1, 2, 3);
 
// Create observer object
const myObserver = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};
 
// Execute with the observer object
myObservable.subscribe(myObserver);

Personalised observable function

const sequence = new Observable((observer) => {
  // synchronously deliver 1, 2, and 3, then complete
  observer.next(1);
  observer.next(2);
  observer.complete();
 
  // unsubscribe function doesn't need to do anything in this
  // because values are delivered synchronously
  return {unsubscribe() {}};
});

sequence.subscribe((value) => {...});

Sources

Complete docs RxJS https://www.learnrxjs.io/

Angular RXJS https://angular.io/guide/observables