Episode 24/21: Angular 18

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

Official Blog Post

Angular v18 is now available!. Today we are excited to share the next… | by Minko Gechev | Angular Blog

Today we are excited to share the next milestone in the evolution of Angular! Over the past three releases we’ve introduced a lot of new…

blog.angular.dev