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');
      }
      // ...
    })
  }
}

A lot of features, like @defer, @if, @for are now stable (effect() is still in developer preview).

According to Alex Rickabaugh, tech lead of the framework, we can expect new features in the next versions as well.

For more information, check out the various videos, blog posts from the community, and the official channels.

Angular 18 Release - Developer Event

What’s new in Angular v18 - YouTube

We’re excited to announce the latest features and updates from Angular v18. Find out about the future of Angular!Subscribe to the Angular channel → https://g...

youtube.com