⭐Angular 17 Features ⭐
Tags: javascript, angular, beginners, webdev
Published: 2024-05-23 03:20:47

---
title: ⭐Angular 17 Features ⭐
published: true
description: Angular 17 features
tags: javascript, angular, beginners, webdev
series: Angular Journey
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8y30zk6nln9dhd50qyju.png
---
Hey there,


Version 17.0.0 is here and it has some great updates for Angular developers everywhere. 🎉🎉

#TL;DR 🙌

✅ Future-looking identity

✅ Built-in control flow

✅ Deferrable views

✅ Revamped hybrid rendering experience

✅ New @angular/ssr package

✅ New lifecycle hooks

✅ Vite and esbuild the default for new projects

✅ Dependency injection debugging in DevTools

✅ Improving Developer Experience



<h1> How to update to version 17</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 17
```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>
  
## ✅ Future-looking identity

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mf9i8us0lu4fuftx6kkn.gif)

* With Angular 17, developers can now access an updated documentation platform hosted on [angular.dev](https://angular.dev/)
* The new website  has new structure, new guides, improved content, and built a platform for an interactive learning journey that will let you learn Angular and the Angular CLI at your own pace, directly in the browser.
* Currently it is in  beta  preview and planning to make it the default website for Angular in v18.
* Read more about it here 👉 [Blog post](https://blog.angular.io/announcing-angular-dev-1e1205fa3039)


## ✅ Built-in control flow
* **The built-in control flow is available in v17 under developer preview today!**
* Angular 17 introduces a new block template syntax, enhancing the developer experience by offering powerful features 
* A new block template syntax that gives you powerful features with simple, declarative APIs are released
* Under the hood, the Angular compiler transforms the syntax to efficient JavaScript instructions that could perform control flow, lazy loading, and more.
* The built-in control flow enables:
  * More ergonomic syntax that is closer to JavaScript, thus more intuitive requiring fewer documentation lookups
  * Better type checking thanks to more optimal type narrowing
  * It’s a concept that primarily exists at build-time, which reduces the runtime footprint (making it “disappearing”) which could drop your bundle size by up to 30 kilobytes and further improve your Core Web Vital scores
  * It is automatically available in your templates without additional imports


### ✅ Conditional statements

```ts
<div *ngIf="loggedIn; else anonymousUser">
  The user is logged in
</div>
<ng-template #anonymousUser>
  The user is not logged in
</ng-template>
```
With the built-in if statement, this condition will look like:

```html
@if (loggedIn) {
  The user is logged in
} @else {
  The user is not logged in
}
```
* Being able to provide the content for @else directly is a major simplification compared to the else clause of the legacy *ngIf alternative. 
* The current control flow also makes it trivial to have @else if, which historically has been impossible.
* The improved ergonomics is even more visible with *ngSwitch:

```html
<div [ngSwitch]="accessLevel">
  <admin-dashboard *ngSwitchCase="admin"/>
  <moderator-dashboard *ngSwitchCase="moderator"/>
  <user-dashboard *ngSwitchDefault/>
</div>

```


which with the built-in control flow turns into:

```html
@switch (accessLevel) {
  @case ('admin') { <admin-dashboard/> }
  @case ('moderator') { <moderator-dashboard/> }
  @default { <user-dashboard/> }
}
```


* The new control flow enables significantly better type-narrowing in the individual branches in @switch which is not possible in *ngSwitch.

### ✅ Built-in for loop

```html
@for (user of users; track user.id) {
  {{ user.name }}
} @empty {
  Empty list of users
}
```


* We often see performance problems in apps due to the lack of trackBy function in *ngFor. 
* A few differences in @for are that track is mandatory to ensure fast diffing performance. 
* In addition, it’s way easier to use since it’s just an expression rather than a method in the component’s class. 
* The built-in @for loop also has a shortcut for collections with zero items via an optional @empty block.
* The @for statement uses a new diffing algorithm and has more optimal implementation compared to *ngFor, which makes it up to 90% faster runtime for community framework benchmarks!



##  ✅ Deferrable views

* Angular 17 introduces a concept known as deferrable views or @defer blocks
* **Deferrable views are available in developer preview in v17**
* Deferrable views bring performance and developer experience to the next level because they enable declarative and powerful deferred loading with unprecedented ergonomics.

```html
@defer (on viewport) {
  <comment-list/>
} @loading {
  Loading…
} @error {
  Loading failed :(
} @placeholder {
  <img src="comments-placeholder.png">
}
```

* There’s a ton of complexity under the hood that Angular manages for you.
* Deferrable views offer a few more triggers:

  * on idle — lazily load the block when the browser is not doing any heavy lifting
  * on immediate — start lazily loading automatically, without blocking the browser
  * on timer(<time>) — delay loading with a timer
  * on viewport and on viewport(<ref>) — viewport also allows to specify a reference for an anchor element. When the anchor element is visible, Angular will lazily load the component and render it
  * on interaction and on interaction(<ref>) — enables you to initiate lazy loading when the user interacts with a particular element 
  * on hover and on hover(<ref>) — triggers lazy loading when the user hovers an element
  * when <expr> — enables you to specify your own condition via a boolean expression


* Deferrable views also provide the ability to prefetch the dependencies ahead of rendering them.
*  Adding prefetching is as simple as adding a prefetch statement to the defer block and supports all the same triggers.
  
```html
@defer (on viewport; prefetch on idle) {
  <comment-list />
}
```


## ✅ Revamped hybrid rendering experience

* Angular 17 brings a revitalized hybrid rendering experience, offering robust server-side rendering (SSR) and static site generation (SSG) support
* 


## ✅ New @angular/ssr package
* Angular Universal repository is moved to the Angular CLI repository and made server-side rendering an even more integral part
* To add hybrid rendering support to your existing application run:

```
ng add @angular/ssr
```


## ✅ New lifecycle hooks

* 2 new life cycle hooks introduced in this release
    * afterRender — register a callback to be invoked each time the application finishes rendering
    * afterNextRender — register a callback to be invoked the next time the application finishes rendering
* Only the browser will invoke these hooks, which enables you to plug custom DOM logic safely directly inside your components.
## ✅ Vite and esbuild the default for new projects
* esbuild plus Vite powered build experience is enabled by default for all new applications
* Benefits
    * A 67% improvement in build time.
    * An 87% speed improvement with SSR and SSG.
    * A lightweight and efficient build process.

## ✅ Dependency injection debugging in DevTools
* brand new debugging APIs are introduced that allow us to plug into the framework’s runtime and inspect the injector tree.

* Based on these APIs we built an inspection user interface that allows you to preview the:

    * Dependencies of your components in the component inspector
    * Injector tree and dependency resolution path
    * Providers declared within the individual injectors


## ✅ Improving Developer Experience
### Input value transforms
* A common pattern is having a component which receives a boolean input. 
* This, however, sets constraints on how you can pass a value to such a component. 
* For example if we have the following definition of an Expander component:

```ts
@Component({
  standalone: true,
  selector: 'my-expander',
  template: `…`
})
export class Expander {
  @Input() expanded: boolean = false;
}

```

* and we try to use it as

```html
<my-expander expanded/>
```
* You’ll get an error that “string is not assignable to boolean”. 
* Input value transforms allow you to fix this by configuring the input decorator:

```ts
@Component({
  standalone: true,
  selector: 'my-expander',
  template: `…`
})
export class Expander {
  @Input({ transform: booleanAttribute }) expanded: boolean = false;
}
```

### Style and styleUrls as strings

* Angular components support multiple stylesheets per component. 
* However, the vast majority of cases when I want to style my components I create an array with a single element pointing to the inline styles or referencing an external stylesheet
* A new feature enables you to switch from
* 


```
@Component({
  styles: [`
    ...
  `]
})
```

```
@Component({
  styleUrls: ['styles.css']
})

```

to the simpler and more logical


```
@Component({
  styles:``
})
```

```
@Component({
  styleUrl: 'styles.css'
})
```




For more let us hear it from the creators
  
Credits : <a href="https://blog.angular.io/introducing-angular-v17-4d7033312e4b">Official Announcement 😄</a>

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