Episode 24/21: Angular 18

#webdev #javascript #programming #angular

Angular 18 is out. For the first time, the main feature is an experimental one: the zoneless mode.

Until Angular 17, zone.js triggered Change Detection, which updates the DOM. Starting from Angular 18, we have a second trigger: the function markForCheck(), which runs automatically within the async pipe or when a Signal's value changes. That Signal must be used inside a template.

There are also other occurrences for markForCheck() like immutable property binding or handled DOM events.

markForCheck() triggering the Change Detection is not experimental but stable. It is a breaking change because the Change Detection might now also be triggered outside of zone.js.

Although that is a rare use case, we can also re-introduce the behavior as before via provideZoneChangeDetection({ignoreChangesOutsideZone: true}).

What is experimental, though, is that you can disable zone.js at all and only rely on markForCheck().

That is done via provideExperimentalZonelessChangeDetection().

Other features include the "Event Replay", which is important for server-side rendering. When the application hasn't hydrated, i.e. Angular hasn't been loaded yet, and users start clicking around, those events will be replayed after hydration.

provideClientHydration(withEventReplay())

The redirectTo property in the Router configuration accepts, next to the existing string, now also a function. That means, when logic is required for the redirection, one doesn't have to fallback to router guards.

export const routes: Routes = [
  {path: '', component: HomeComponent},
  {
    path: '**',
    redirectTo: () => isNight() ? '/404-night' : '404-day'
  }
];

<ng-content> accepts a default value. It is actually very straightforward 😄:

<ng-content>Nothing to see here :) </ng-content>`

FormGroup, FormArray, and FormControl expose an events property, which provides all important events as an Observable:

export class AppComponent {
  name = new FormControl("", {validators: [Validators.required]})

  constructor() {
    this.name.events.subscribe((event: ControlEvent) => {
      if (event instanceof StatusChangeEvent) {
        console.log('status changed');
      }
      else if (event instanceof ValueChangeEvent) {
        console.log('value changed');
      }
      // ...
    })
  }
}