The Angular team recently announced the release of Angular 18, which introduces zoneless change detection, a new developer hub, stable versions of several features, server-side rendering improvements, and more. This release stabilises new APIs, addresses common developer requests, and enhances 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 redirected to angular.dev.
Several features have reached stability in Angular 18. Material 3 components, 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 aim to ensure a more robust and interactive SSR 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.