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 

✅ 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