Hey there,

Today we’re excited to take a deep dive into the exciting Angular 18, which is the latest version of this powerful framework.

Features 👉

✅ 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,

ng update @angular/cli @angular/core

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:

bootstrapApplication(App, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

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

Angular 18 Features