Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Signals

Angular Signals

Yannick Baron

April 02, 2024

More Decks by Yannick Baron

Other Decks in Technology


  1. Angular application Components are the main building blocks Consist of

    a TypeScript class, an HTML template, and CSS styles Essentially define your custom DOM nodes Component templates can use more components 👉 An application is essentially a tree of components
  2. A simple Angular component... @Component() export class CounterComponent { counter

    = 0; increment() { this.counter++; } reset() { this.counter = 0; } } <p>{{ counter }}</p> <button (click)="increment()">Increase Counter</button> <button (click)="reset()">Reset</button> 👉 note: setting a variable on the component updates the template
  3. The Magic of Angular: Zone.js Zones are execution contexts that

    track asynchronous operations Achieved via monkey patching Angular creates a root zone for the application ("NgZone") When an event or asynchronous task occurs, Zone.js notifies Angular Angular triggers change detection and updates the views
  4. Angular Change detection Start from root component Walk through the

    component tree Check template bindings If change detected, update DOM node Changes propagated to children AppComponent UsersComponent UserListComponent UserFilterComponent RadioButtonComponent
  5. Downsides of Zone.js approach Reliant on Zone.js monkey patching Runs

    more often than necessary Sometimes leads to unpredictable behavior Recheck all template bindings 👉 Advanced concepts to learn to improve performance: OnPush, Immutability, runOutsideAngular, ...
  6. Reactive Angular with RxJS Use OnPush strategy Reactive state management

    Subscribe via Async pipe Async pipe notifies the change detector 👉 Only check relevant components AppComponent UsersComponent UserListComponent UserFilterComponent RadioButtonComponent
  7. Downsides of RxJS (for template rendering) Observables asynchronous by nature

    AsyncPipe default null value Subscription management Recheck all template bindings No reactive inputs
  8. Enter Signals Reactive primitive Hold value, notify when value changes

    Integrated with Angular 👉 Results in knowing exactly which nodes need updating
  9. Same component as before @Component() export class CounterComponent { counter

    = 0; increment() { this.counter++; } reset() { this.counter = 0; } } <p>{{ counter }}</p> <button (click)="increment()">Increase Counter</button> <button (click)="reset()">Reset</button>
  10. Same component as before with signals @Component() export class CounterComponent

    { counter = signal(0); increment() { this.counter.update((count) => count + 1); } reset() { this.counter.set(0); } } <p>{{ counter() }}</p> <button (click)="increment()">Increase Counter</button> <button (click)="reset()">Reset</button>
  11. Signals API signal() Create a writable Signal set() Set a

    new value to the Signal update() Update the Signal's value based on its current one computed() Create a read only Signal deriving its value from other Signals
  12. Signals API - effect() React to signal value changes Used

    for side effects logging, persisting to browser storage, ... Executed once initially Can not write to Signals by default Reliant on the injection context
  13. Signal based Components input() Create a writable Signal bound to

    a component input model() Creates a writable Signal that reflects changes (two way binding) viewChild() / viewChildren() Access references to components, directives and elements in your view
  14. RxJS has its place RxJS is used to handle asynchronicity

    Plenty of useful operators error handling, retrying, scheduling, buffering, ... RxJS interop provided by angular toObservable / toSignal / takeUntilDestroyed Used for asynchronous side effects @ngrx/effects, ComponentStore effects, rxMethod
  15. What the future holds Zone-less applications Signal based components Signal

    based, synchronous APIs Function based life cycle hooks 👉 Less concepts to learn 👉 Better performance out of the box 👉 Less wrestling with the CD