On November 8, 2023, Angular version 17 was launched, and this application seems like a rebirth for the framework, which was first introduced in September 2016. The 13th anniversary of Angular’s red shield was celebrated last month. AngularJS was the catalyst for a new wave of JavaScript frameworks that emerged to meet the growing demand for rich web experiences. With version 17, we bring everyone to the future with a fresh appearance and a collection of forward-thinking features, setting new standards for performance and developer experience.

Angular 17 was launched with mainly two new features: a new template control block syntax and deferred loading.

This Angular 17 or v17 is released with the below updates:

  • Deferred views take performance and developer experience to the next level.
  • In public benchmarks, built-in control flow loops result in up to 90% quicker runtime.
  • Build times for hybrid rendering can be reduced by up to 87%, while client-side rendering can be reduced by 67%.
  • A new style that reflects Angular’s forward-thinking features.
  • New dynamic learning journey along with lots of additional upgrades and enhancements!
  • and many other features and improvements by the Angular Team.

Changes in Angular 17

  • New, declarative control flow
  • Deferred loading blocks
  • View Transitions API support
  • Support for passing in @Component.styles as a string
  • Angular’s animation code is lazy-loadable
  • TypeScript 5.2 support
  • The core Signal API is now stable (PR)
  • Signal-based components are not ready yet, they won’t be a part of Angular 17
  • Node.js v16 support has been removed and the minimum support version is v18.13.0 (PR)
  • We expect that Esbuild will be the default builder and the default dev server will use Vite

New Logo of Angular

This version of Angular has come with new features and improvements. But this time they have also come with a brand new logo of Angular with futuristic style and color.

Angular 17

Now let’s see the latest features in detail:

New Control Flow Syntax

Angular 17 has a new template control block syntax with a declarative control flow.

Angular 17 was released with various new template capabilities, including a new built-in syntax for control flow and deferrable views. Deferrable views allow templates to load dependencies slowly in response to one or more customizable trigger conditions, and the new declarative control flow incorporates the functionality of NgIf, NgFor, and NgSwitch into the framework itself. This is the most substantial modification we’ve ever done to Angular templates, and we’re hard at work polishing these capabilities.

One of the most significant advantages of these new control blocks is that they will facilitate zoneless applications with Signals.

The new control flow syntax is introduced as blocks with a @. It’s known as @-syntax. There are mainly three controls with blocks as below:

Conditional Control

You can use the new control block syntax and create conditionally rendered blocks with @if and @else

@if (condition) {
   <content/>
} @else if (other_condition) {
   <other_content/>
} @else {
   <another_content/>
}

If we compare ngIf and new built-in if statement:

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

This condition will appear like this using the built-in if statement:

@if (loggedIn) {
  The user is logged in
} @else {
  The user is not logged in
}

Loop Control

You can create loops with @for, and handle empty collections with the @empty block

@for (film of films; track film.name) {
  <li> {{ film.name }}</li>
} @empty {
  <li> There are no films.</li>
}

Switch Control

You can create switch and case blocks with @switch@case and @default

@switch (condition) {
@case (x) {
Content for x case
}
@case (y) {
Content for y case
@default {
Default content.
}
}

Now let’s compare it 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/> }
}

Deferred Loading

This is the most awaited and important feature of this release Angular 17.

Lazy loading is a method that allows web applications to load resources (such as scripts) only when they are required. Lazy loading defers the loading of non-essential content until the user interacts with the website, scrolls, or reaches a certain point in the page, as opposed to loading all content when the page first loads.

Lazy loading improves the user experience by reducing the initial page load time and allowing users to begin interacting with the app as soon as possible, while non-essential app components load in the background. It minimizes the amount of bandwidth used and the server load.

In prior Angular versions, we could use the Router to lazy-load a portion of the application or dynamic imports with ngComponentOutlet.

The Angular team will take lazy-loading to the next level in Angular 17: Angular now supports a @defer control block that enables lazy-loading of the block’s content. Lazy-loading also applies to the block’s dependencies: all components, directives, and pipes will be lazy-loaded.

There are some key aspects of lazy loading. You can specify a logical expression to trigger the rendering of a deferred block. You can define a declarative trigger condition to trigger the rendering (for example on hover), which trigger types are supported. You can show a placeholder, a loading state, or an error state with additional @placeholder, @loading and @error blocks. You can do prefetching work.

The new deferrable views, allow you to lazily load the list of comments and all their transitive dependencies with a single line of declarative code:

@defer {
  <comment-list />
}

The most amazing part is that it all happens at compile-time: Angular encapsulates all the complexity by locating components, directives, and pipes used within a @defer block, producing dynamic imports, and managing the process of loading and switching between states.

Angular first renders the placeholder block’s contents. The loading of the <comment-list/> component begins when it is visible in the viewport. Angular removes the placeholder and renders the component after the loading is complete.

For example:

@defer (on viewport) {
  <comment-list />
} @placeholder {
  <!-- A placeholder content to show until the comments load -->
  <img src="comments-placeholder.png">
}

There are also blocks for loading and error states:

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

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 for specifying 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

New and Improved Hybrid Rendering Experience

With a prompt in ng new, this version brings server-side rendering (SSR) and static-site generation (SSG or prerendering).

You can also activate SSR in new projects with the following:

ng new my-app --ssr

Signals

Signal was made available as a developer preview alongside Angular 16. Signal is stable and usable with Angular 17. When used in conjunction with the ChangeDetection.You can run highly precise responsiveness using the OnPush option, allowing you to update only the component whose signal has been modified. The signal mutate technique is no longer accessible. The effects are still at the developer preview stage.

Angular Devtools

The injection tree can now be viewed in Angular Devtools, which is a pretty nice small feature. When you have circular dependencies or a token that isn’t resolved correctly, this is a great tool for debugging your application.

Conclusion

This Angular version 17 has come up with many new and amazing features and improvements along with new branding. We can say that Angular is reborn with this upgrade. You can check the official documents for more details.

If you are looking for Angular Admin Dashboard Template then you can check out below useful Admin Template which can save you time, money, and energy:

Modernize Angular Material Dashboard

If you are looking for some more amazing Angular Templates for Admin Dashboard Panels then you can check out Angular Templates by WrapPixel Team and also some other Angular Templates by AdminMart Team.

Related Article: Angular Cheat Sheet