Discover Angular 17: The Ultimate Guide to the Latest Web Development Advancements

Last month marked the 13th anniversary of Angular 17 red shield. AngularJS was the starting point for a new wave of JavaScript frameworks emerging to support the increasing need for rich web experiences. Today with a new look and a set of forward-thinking features we bring everyone along to the future with version 17, setting new standards for performance and developer experience.

Built-in control flow

To improve developer experience, we’ve released a new block template syntax that gives you powerful features with simple, declarative APIs. Under the hood, the Angular 17 compiler transforms the syntax to efficient JavaScript instructions that could perform control flow, lazy loading, and more.

We used the new block syntax for an optimized, built-in control flow. After running user studies we identified that a lot of developers struggle with *ngIf, *ngSwitch, and *ngFor. Working with Angular 17 since 2016 and being part of the Angular team for the past 5 years, I personally still have to look up the syntax of *ngFor and trackBy. After collecting feedback from the community, partners, and running UX research studies, we developed a new, built-in control flow for Angular!

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
• Significant performance improvements that we’ll cover in a little bit

Future-looking identity

Angular 17 renaissance has been going with full steam for the past couple of versions. We’ve been picking up momentum with improvements such as signal-based reactivity, hydration, standalone components, directive composition, and dozens of other features. Despite the rapid evolution of Angular 17, its branding has not been able to catch up — it has been almost identical since the early days of AngularJS.

Future-looking documentation

Together with the new brand we also developed a new home for Angular’s documentation — angular.dev. For the new documentation website we have new structure, new guides, improved content, and built a platform for an interactive learning journey that will let you learn Angular 17 and the Angular CLI at your own pace, directly in the browser.

The new interactive learning experience is powered by WebContainers and lets you use the power of the Angular CLI in any modern web browser!

Also Read:  Angular And Wiz Are Better Together

Built-in control flow

To improve developer experience, we’ve released a new block template syntax that gives you powerful features with simple, declarative APIs. Under the hood, the Angular compiler transforms the syntax to efficient JavaScript instructions that could perform control flow, lazy loading, and more.

We used the new block syntax for an optimized, built-in control flow. After running user studies we identified that a lot of developers struggle with *ngIf, *ngSwitch, and *ngFor. Working with Angular 17 since 2016 and being part of the Angular 17 team for the past 5 years, I personally still have to look up the syntax of *ngFor and trackBy. After collecting feedback from the community, partners, and running UX research studies, we developed a new, built-in control flow for Angular 17!

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
• Significant performance improvements that we’ll cover in a little bit.

Conditional statements

Let’s look at a side by side comparison with *ngIf:

<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:

@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:

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

which with the built-in control flow turns into:

@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

One of my most favorite updates is the built-in for loop that we introduced, which on top of the developer experience improvements pushes Angular 17 rendering speed to another level!

Its basic syntax is:

@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.