Angular 18 Arrives with Experimental Zoneless Mode

Angular 18 has landed, and for the first time ever, the headline feature is an experimental one: the zoneless mode.

Before Angular 17, zone.js was the mechanism that triggered Change Detection, which in turn refreshed the DOM. With Angular 18, a second trigger has been introduced: the markForCheck() function. This runs automatically when the async pipe activates or when a Signal used directly in a template experiences a value change.

Other scenarios also invoke markForCheck(), such as immutable property bindings or handled DOM events.

The stable nature of markForCheck() as a Change Detection trigger marks a breaking change, as Change Detection can now be initiated outside the boundary of zone.js.

Though rare, developers can restore the previous behavior by using provideZoneChangeDetection({ignoreChangesOutsideZone: true}).

The experimental part is the ability to disable zone.js entirely, relying solely on markForCheck(). This is achieved with the provideExperimentalZonelessChangeDetection() provider.

Event Replay Enhances Server-Side Rendering

"Event Replay" is another notable feature, particularly relevant for server-side rendering. In scenarios where hydration hasn't occurred yet (meaning Angular hasn't loaded), user interactions like clicks will be captured and replayed once the application hydrates. This is enabled by provideClientHydration(withEventReplay()).

Router Redirects Get Functional

The Router configuration's redirectTo property now supports a function in addition to the existing string format. This allows for redirection logic without needing router guards.

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

Content Projection Falls Back Gracefully

The <ng-content> tag now accepts a default value, which is quite straightforward 😄:

<ng-content>Nothing to see here :) </ng-content>`
Enter fullscreen mode Exit fullscreen mode

Reactive Forms Get a Stream of Events

Instances of FormGroup, FormArray, and FormControl now come with an events property. This exposes a comprehensive list of form events through 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');
      }
      // ...
    })
  }
}
Enter fullscreen mode Exit fullscreen mode

Stability and the Road Ahead

Several features, including @defer, @if, and @for, are now considered stable. The effect() function, however, remains in developer preview status.

Alex Rickabaugh, the framework's tech lead, hints that more new features are on the horizon for upcoming versions.

For an in-depth look, consider checking out community videos, blog posts, and official announcements for further details.

Angular 18 Release - Developer Event

Official Blog Post

blog.angular.dev