Skip to content

Latest commit

 

History

History
71 lines (58 loc) · 2.61 KB

README.md

File metadata and controls

71 lines (58 loc) · 2.61 KB
Raw


Ng New 2024 - The Angular Renaissance

  • By Kobi Hari (27/06/2024)

Contact me

Please feel free to contact me for questions, or just to have a chat :-)

Material
Our Projects here
Our Presentation here

The inject function

  • How to Inject using the function
  • What is the Injection Context and how it affects using the function
  • Where can we, and where can we not, use the inject function
  • Creating our own injection context using runInInjectionContext
  • The DestroyRef and how it is used

The new standalone paradigm

  • Understanding standalone component
  • Bootstrapping applications without modules
  • Importing providers in the new paradigm

Routing in the standalone paradigm

  • Understanding Environment injetors
  • The 2 types of lazy loading: loadComponent and loadChildren
  • Control flow in Angular 17
  • Lazy loading using @defer
  • Directive Composition
  • Router inputs
  • Functional Guards
  • Functional Resolvers

Signals in Angular 16+

  • What is a signal
  • The signal function
  • The computed function
  • The set and update functions
  • The mutate function
  • The effect function
  • Where can we create signals
  • The limitations of using signals

Interoperability with RxJS

  • convert an observable into signal with the toSignal function
  • convert a signal into observable with the toObservable function
  • Use them both with caution - mind the injection context

Singnals in Angular 18+ (On the route to zoneless)

  • Signals slowly replace the classic angular decorators
  • use readonly caption = input('hello') to create an input called `caption' with a default value of 'hello'
  • use readonly caption = input.required<string>() to create a required input
  • use the output function to create an output event emitter that is also a signal
  • use the model function to create a two-way binding (input + output)
    • You can use it like input and respond to changes in it using an effect
    • You can use it like output and push events into it
    • The consumer can use 3 types of bindings into it:
      • <app-comp [caption]="value"/>
      • <app-comp (captionChanged)="doSomething()"/>
      • <app-comp [(caption)]="writeableSignal"/>
  • use the viewChild(), viewChildren, contentChild, contentChildren functions to query the view and content into a signal