DEV Community

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

Posted on

⭐Angular 17 Features ⭐

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

How to update to version 17

Visit update.angular.io for detailed information and guidance. To have the best update experience,

Update to 17

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?

✅ Future-looking identity

Image description

  • With Angular 17, developers can now access an updated documentation platform hosted on 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

✅ 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

<div *ngIf="loggedIn; else anonymousUser">
  The user is logged in
</div>
<ng-template #anonymousUser>
  The user is not logged in
</ng-template>
Enter fullscreen mode Exit fullscreen mode

With the built-in if statement, this condition will look like:

@if (loggedIn) {
  The user is logged in
} @else {
  The user is not logged in
}
Enter fullscreen mode Exit fullscreen mode
  • 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:
<div [ngSwitch]="accessLevel">
  <admin-dashboard *ngSwitchCase="admin"/>
  <moderator-dashboard *ngSwitchCase="moderator"/>
  <user-dashboard *ngSwitchDefault/>
</div>

Enter fullscreen mode Exit fullscreen mode

which with the built-in control flow turns into:

@switch (accessLevel) {
  @case ('admin') { <admin-dashboard/> }
  @case ('moderator') { <moderator-dashboard/> }
  @default { <user-dashboard/> }
}
Enter fullscreen mode Exit fullscreen mode
  • 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

@for (user of users; track user.id) {
  {{ user.name }}
} @empty {
  Empty list of users
}
Enter fullscreen mode Exit fullscreen mode
  • 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.
@defer (on viewport) {
  <comment-list/>
} @loading {
  Loading…
} @error {
  Loading failed :(
} @placeholder {
  <img src="comments-placeholder.png">
}
Enter fullscreen mode Exit fullscreen mode
  • 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(
    • on viewport and on viewport() — 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() — enables you to initiate lazy loading when the user interacts with a particular element
    • on hover and on hover() — triggers lazy loading when the user hovers an element
    • when — 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.

@defer (on viewport; prefetch on idle) {
  <comment-list />
}
Enter fullscreen mode Exit fullscreen mode

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

✅ 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:
@Component({
  standalone: true,
  selector: 'my-expander',
  template: `…`
})
export class Expander {
  @Input() expanded: boolean = false;
}

Enter fullscreen mode Exit fullscreen mode
  • and we try to use it as
<my-expander expanded/>
Enter fullscreen mode Exit fullscreen mode
  • 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:
@Component({
  standalone: true,
  selector: 'my-expander',
  template: `…`
})
export class Expander {
  @Input({ transform: booleanAttribute }) expanded: boolean = false;
}
Enter fullscreen mode Exit fullscreen mode

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: [`
    ...
  `]
})
Enter fullscreen mode Exit fullscreen mode
@Component({
  styleUrls: ['styles.css']
})

Enter fullscreen mode Exit fullscreen mode

to the simpler and more logical

@Component({
  styles:``
})
Enter fullscreen mode Exit fullscreen mode
@Component({
  styleUrl: 'styles.css'
})
Enter fullscreen mode Exit fullscreen mode

For more let us hear it from the creators

Credits : Official Announcement 😄

Changelog : Repository

Top comments (0)