⭐Angular 18 Features ⭐

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