Angular in a nutshell

23 nov. 2023 - 2min

Directives

Directives are classes that can be used to enhance and modify the view simply by adding HTML attributes to the template.

Attribute directive: ngClass, ngStyle

Structural directive: *ngIf, *ngFor

Interpolation: {{variable}}

Property binding: [ngClass]

Event binding: (click)

Two-way binding: [input] (output) [(two-way)]

let add = function(a, b){ return a+b; }; // classical function
let add = (a, b) => a + b; // fat arrow function

Data-formatting: {{ currentDate | date }}

According to RxJS documentation, “it represents the idea of an invokable collection of future values or events”.

subscribe unsubscribe

It is important to not forget to unsubscribe (in ngOnDestroy function).

Promise: single value, non-cancellable, immediate processing, two methods (then/catch)

Observable: “stream” of values, cancellable, lazy, full of operators

next: value => console.log(value),
error: err => console.error(err),
complete: () => console.log('DONE!')

Teardown logic: roughly speaking, provide an unsubscribe to avoid leaks, etc.

setTimeout(() => subscription.unsubscribe(), 5000);

RxJS natively provides over a hundred operators. An operator can be used to define an observable from another by applying a few transformations.

map allows you to create a new Observable from the original one, simply by transforming each of its values

These operators return an Observable for each of the values of the original Observable.

mergeMap merges the different generated Observables.

switchMap when you switch to a new value, you unsubscribe the Observable produced by the previous value (advantage over mergeMap).

filter allows you to keep only the elements for which the predicate function returns true.

HttpClient simplifies the use of HTTP exchanges, and allows observables to be used as a basis.

StateManagement, Dispatcher, Reducer, State.