DEV Community

Cover image for ⭐Angular 18 Features ⭐
Sandeep Balachandran
Sandeep Balachandran

Posted on

⭐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
Enter fullscreen mode Exit fullscreen mode

In order to update your global angular,

npm i -g @angular/cli
Enter fullscreen mode Exit fullscreen mode

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()
  ]
}); 

Enter fullscreen mode Exit fullscreen mode
  • 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');
  }
}

Enter fullscreen mode Exit fullscreen mode
  • 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!

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 {}
Enter fullscreen mode Exit fullscreen mode
  • Now we can use the component:
<app-profile>
  <span class="greeting">Good morning </span>
</app-profile>
Enter fullscreen mode Exit fullscreen mode

Which will result in:

<span class="greeting">Good morning </span>
Unknown user
Enter fullscreen mode Exit fullscreen mode

👉 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
});
Enter fullscreen mode Exit fullscreen mode

👉 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 },
];
Enter fullscreen mode Exit fullscreen mode

👉 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)