DEV Community

Cover image for Episode 24/21: Angular 18
ng-news for This is Angular

Posted on

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.


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'
Enter fullscreen mode Exit fullscreen mode

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

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

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() { ControlEvent) => {
      if (event instanceof StatusChangeEvent) {
        console.log('status changed');
      else if (event instanceof ValueChangeEvent) {
        console.log('value changed');
      // ...
Enter fullscreen mode Exit fullscreen mode

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...


Official Blog Post

Angular v18 is now available!. Today we are excited to share the next… | by Minko Gechev | May, 2024 | 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…


Top comments (1)

jangelodev profile image
João Angelo

Hi ng-news ,
Top, very nice !
Thanks for sharing