First Hands-On Experience with Angular 17

Muhammed Musthafa — Wed, 24 Apr 2024 13:25:10 +0000

The Angular team has introduced a new block template syntax that simplifies complex features and improves developer experience. This new syntax converts complex code into efficient JavaScript instructions, enhancing control flow, lazy loading, and other functionalities.

Here are the main benefits of the new syntax:

More Ergonomic and Intuitive: The syntax is closer to JavaScript, making it easier for developers to understand and reducing the need to frequently reference documentation.
Improved Type Checking: The syntax optimizes type narrowing, which helps improve type checking and catch errors earlier during development.
Build-Time Optimization: Because the new syntax operates primarily at build-time, it has minimal impact on runtime performance. This can decrease your bundle size by up to 30 kilobytes and improve your Core Web Vital scores.
Automatic Availability: The new block syntax is automatically available in your templates without needing any additional imports.
Performance Improvements: Significant performance improvements are a result of this new syntax, which we will discuss in more detail soon.

I'm really happy with these new syntax updates! They streamline the process of writing conditional and iterative logic in Angular templates, making it easier for developers to efficiently work with the framework.

New and Improved Conditional Statements

Here's a side-by-side comparison of the traditional *ngIf directive and the new block template syntax for conditional statements.

Traditional `*ngIf` Statement:

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

New Block Template Syntax:

if (loggedIn) {
  <!-- The user is logged in -->
  The user is logged in
} else {
  <!-- The user is not logged in -->
  The user is not logged in
}

In the new syntax:

The control flow is more direct and familiar to developers accustomed to writing JavaScript.
The syntax is more straightforward and doesn't require the *ngIf and ng-template directives.
This new syntax is automatically available in your templates without needing any additional imports.

Switch Statement

Here's a comparison of the traditional *ngSwitch directive and the new block template syntax for switch statements.

Traditional `ngSwitch` Statement:

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

New Block Template Syntax:

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

For Loop

Here's an example of how the new block template syntax compares with the traditional *ngFor directive for for loops.

New Block Template Syntax:

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

The @for statement uses a new diffing algorithm and has a more optimal implementation compared to *ngFor, making it up to 90% faster.

Overall, the new block template syntax in Angular 17 offers a more direct and human-readable approach to control flow, making it easier for developers to write clean and efficient code. This, in turn, improves the overall developer experience and performance of Angular applications. I'm really happy with these new syntax updates!

DEV Community: Muhammed Musthafa

First Hands-On Experience with Angular 17

New and Improved Conditional Statements

Traditional *ngIf Statement:

New Block Template Syntax:

Switch Statement

Traditional ngSwitch Statement:

New Block Template Syntax:

For Loop

New Block Template Syntax:

Traditional `*ngIf` Statement:

Traditional `ngSwitch` Statement: