Angular 18 Introduces Zoneless Change Detection

Angular recently announced the release of Angular 18, introducing zoneless change detection, a new developer hub, stable versions of several features, server-side rendering improvements, and more. This release focuses on stabilizing new APIs, addressing common developer requests, and enhancing the overall developer experience.

Angular 18 introduces experimental support for zoneless change detection, eliminating the need for zone.js. This approach aims to improve performance by reducing the number of change detection cycles and offering more readable stack traces. Developers can try the experimental zoneless support by adding the provider to their application bootstrap:

bootstrapApplication(App, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});
 

Alex Rickabaugh, senior software engineer at Google, tweeted on X, formerly known as Twitter, about the significance of zoneless support in Angular 18:

I'm particularly proud of this release. Our biggest challenge is maintaining Angular's stability and reliability while evolving with the modern web. With v18, we take our first steps towards a future without zone.js.

Angular.dev is the official site for Angular documentation. It includes a hands-on getting started journey, interactive playgrounds, refreshed guides, and simplified navigation. All requests to angular.io now redirect to angular.dev.

Several features have reached stability in Angular 18. Material 3 components, which were previously in experimental support, are now stable and include new themes and documentation. Deferrable views, designed to improve Core Web Vitals, are now stable and enable developers to defer the loading of certain views. The new built-in control flow syntax and features have also reached stability, offering improved performance and ergonomic benefits.

Angular 18 enhances server-side rendering (SSR) with i18n hydration support, better debugging, and event replay powered by Google's event dispatch library. These improvements are aimed to ensure a more robust and interactive server-side rendering experience.

Specifying default content for ng-content is now available in Angular 18. This allows developers to provide fallback content in their components. For instance:

@Component({
  selector: 'app-profile',
  template: `
    Hello 
    Unknown user
  `,
})
export class Profile {}
 

Using the component:

<app-profile>
  <span class="greeting">Good morning </span>
</app-profile> 

The output will be:

<span class="greeting">Good morning </span>
Unknown user 

Angular forms now expose a property called events , allowing developers to subscribe to a stream of events for form controls. For example:

const nameControl = new FormControl('name', Validators.required);
nameControl.events.subscribe(event => {
  // Process individual events
});
 

Additionally, Angular 18 offers higher flexibility with route redirects by enabling the use of functions to return dynamic redirect routes. For instance:

const routes: Routes = [
  { path: "first-component", component: FirstComponent },
  {
    path: "old-user-page",
    redirectTo: ({ queryParams }) => {
      const errorHandler = inject(ErrorHandler);
      const userIdParam = queryParams['userId'];
      if (userIdParam !== undefined) {
        return `/user/${userIdParam}`;
      } else {
        errorHandler.handleError(new Error('Attempted navigation to user page without user ID.'));
        return `/not-found`;
      }
    },
  },
  { path: "user/:userId", component: OtherComponent },
];
 

Finally, Angular 18 updates its dependency to TypeScript 5.4, allowing developers to take advantage of the latest TypeScript features and improvements.