⭐Angular 18 Features ⭐
Tags: javascript, angular, beginners, webdev
Published: 2024-05-23 06:24:30

---
title: ⭐Angular 18 Features ⭐
published: true
description: Angular 18 features
tags: javascript, angular, beginners, webdev
series: Angular Journey
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k8w0u9mc5n91ij2afcll.png
---
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




<h1> How to update to version 18</h1>
Visit <a href="https://update.angular.io">update.angular.io</a> for detailed information and guidance. To have the best update experience,

Update to 18
```cmd
ng update @angular/cli @angular/core
```

In order to update your global angular,
``` cmd
npm i -g @angular/cli
```

<center><h2><u>What’s in this release?</u></h2></center>
  
## ✅ 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](https://angular.io/) now automatically redirect to [angular.dev](https://angular.dev/)

## ✅ Stablilty Updates
### Material 3 is now stable!
*  You can check it out right here 👉 [material.angular.io](https://material.angular.io/) 

### Signal APIs in developer preview
* Find how to use the APIs in  signals guide [Guide](https://angular.dev/guide/signals)

### 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!](https://devblogs.microsoft.com/typescript/announcing-typescript-5-4/)



For more let us hear it from the creators
  
Credits : <a href="https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe">Official Announcement 😄</a>

Changelog : <a href="https://github.com/angular/angular/blob/master/CHANGELOG.md"> Repository </a>