Hey there,
Version 18.0.0 is here and it has some great updates for Angular developers everywhere. 🎉🎉
TL;DR 🙌
✅ Experimental support for zoneless change detection
✅ Angular.dev is now the new home for Angular developers
✅ Material 3, deferrable views, built-in control flow are now stable
✅ Server-side rendering improvements such as i18n hydration support
✅ More Additional features
How to update to version 18
Visit update.angular.io for detailed information and guidance. To have the best update experience,
Update to 18
ng update @angular/cli @angular/core
In order to update your global angular,
npm i -g @angular/cli
What’s in this release?
✅ Evolving change detection
- You can try the experimental zoneless support in Angular starting today! Add
provideExperimentalZonelessChangeDetection
to your application bootstrap
bootstrapApplication(App, {
providers: [
provideExperimentalZonelessChangeDetection()
]
});
- After adding the provider, remove zone.js from your polyfills in angular.json
-
Moving forward, zoneless opens many doors for developers:
- Improving composability for micro-frontends and interoperability with other frameworks
- Faster initial render and runtime
- Smaller bundle size and faster page loads
- More readable stack traces
The best way to use zoneless in your components is with signals:
@Component({
...
template: `
<h1>Hello from {{ name() }}!</h1>
<button (click)="handleClick()">Go Zoneless</button>
`,
})
export class App {
protected name = signal('Angular');
handleClick() {
this.name.set('Zoneless Angular');
}
}
- In the example above, clicking the button invokes the handleClick method, which updates the signal value and updates the UI.
- This works similarly to an application using zone.js, with few differences.
- With zone.js, Angular ran change detection any time application state might have changed.
- Without zones, Angular limits this checking to fewer triggers, such as signal updates.
- This change also includes a new scheduler with coalescing to avoid checking for changes multiple times consecutively.
✅ New home for Angular developers
- Today, angular.dev has became the official documentation website for Angular!
- On top of the new, modern look and feel you can find
- an interactive hands-on tutorial based on WebContainers,
- interactive playground with examples,
- improved search powered by Algolia,
- refreshed guides,
- simplified navigation
- All requests to angular.io now automatically redirect to angular.dev
✅ Stablilty Updates
Material 3 is now stable!
- You can check it out right here 👉 material.angular.io
Signal APIs in developer preview
- Find how to use the APIs in signals guide Guide
Deferrable views are now stable
Built-in control flow is now stable
✅ Improvements in server-side rendering
- one of the main blockers to get even more people to take advantage of hydration was lack of i18n support
- i18n blocks is available in developer preview mode in Angular v18!
✅ Improved debugging experience
- Angular’s hydration process can be visulize in Angular DevTools.
- Next to each component you can find an icon representing the component’s hydration status.
- To preview which components Angular hydrated on the page you can also enable an overlay mode.
- If your app has any hydration errors, Angular DevTools will visualize them in the component explorer.
✅ More Additional features
👉 Specifying a fallback content for ng-content
- In v18 specifying default content for ng-content is available
@Component({
selector: 'app-profile',
template: `
<ng-content select=".greeting">Hello </ng-content>
<ng-content>Unknown user</ng-content>
`,
})
export class Profile {}
- Now we can use the component:
<app-profile>
<span class="greeting">Good morning </span>
</app-profile>
Which will result in:
<span class="greeting">Good morning </span>
Unknown user
👉 Unified control state change events
- FormControl, FormGroup and FormArray classes from Angular forms now expose a property called events, which allows you to subscribe to a stream of events for this form control.
- Using it you can track changes in value, touch state, pristine status, and the control status.
Now you can use:
const nameControl = new FormControl<string|null>('name', Validators.required);
nameControl.events.subscribe(event => {
// process the individual events
});
👉 Automating the migration to the application builder
- In Angular v17 we announced “application builder” as stable and enabled it by default for new projects.
- Under the hood it uses Vite with esbuild to replace the previous webpack experience.
👉 Route redirects as functions
- To enable higher flexibility when dealing with redirects, in Angular v18 redirectTo now accepts a function which returns a string.
- For example, if you’d like to redirect to a route that depends on some runtime state you can implement a more complicated logic in a function:
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 },
];
👉 TypeScript 5.4
- Angular updated the dependency on TypeScript letting you take advantage of all the latest TypeScript 5.4 features!
For more let us hear it from the creators
Credits : Official Announcement 😄
Changelog : Repository
Top comments (0)