Angular 17 vs Angular 16, A new comprehensive look for Angular developers

After so long, Angular finally rolls out the new version with the updated syntax. After the updation of angular-cli to angular.json, nothing major comes in terms of Angular syntax.

Angular 17

From Angular 17, many new syntax we need to adopt. The main changes in the SSR blow, control in flow statements and many.

Control Flow Statements

🔹If and If else

Firstly let’s look at the Angular 16 or below version how the normal if statement works

//Angular 16 with ngIf
<div *ngIf="a>b">
  A is greater than b
</div>

Now the same code if we need to write in the Angular 17. Also in this we have multiple if else block too which is missing in the old one.

/* If block */
@if (a > b) {
  A is greater than B
}

/* If else ladder, here just checking role with if else*/
@if (user.role="1") {
  Hello, User
} @else if (user.role="2") {
  Hello, Supervisor
} @else {
  Hello, Your role not available
}

🔹For Loop Statement

Angular 16 or below version

<div *ngFor="let user of users; trackBy: trackUsers;">
  <div class="name">{{user.name}}</div>
 </div>

Angular 17

@for (user of users; track user.id) {
  <div class="name">{{user.name}}</div>
}

In Below versions of Angular 17 trackby is not required. But in Angular 17, we must use trackby and now its syntax change to track and then the unique value of the array if nothing there we can add index as unique value.

🔹Switch Statement

Angular 16 or below version

<div [ngSwitch]="role">  
    <div *ngSwitchCase="user">User Matched</div>  
    <div *ngSwitchCase="admin">Admin Matched</div>  
    <div *ngSwitchCase="supervisor">Supervisor Matched</div>  
    <div *ngSwitchDefault>No case matches, this is the defauult case</div>  
</div>

Angular 17 — The switch statement is similar to that of if or if else ladder statement.

@switch (role) {
  @case ("user") {
   <div>User Matched</div>
  }
  @case ("admin") {
   <div>Admin Matched</div>
  }
@case ("supervisor") {
   <div>Supervisor Matched</div>
  }
  @default {
    <div>No case matches, this is the defauult case</div>
  }
}

For reference regarding control flow statements, please visit the below link

🔹Angular 17 Control Flow Statement

Improved Server-Side Rendering (SSR)

This feature is also one of the highlights in the Angular 17 version. If we’re dealing with server side rendering this Angular 17 is better than the previous versions of Angular.

When we setup/creating a project, we need to enable it by using ssr flag.

ENable SSR while create project

To add SSR to an existing project, use the Angular CLI ng add command.

Add SSR to existing project

Now after that we need to configure, do hydration and cached the data of HttpClient.

Docs for Angular 17 Server Side Rendering-> https://angular.dev/guide/ssr

Upgrade Typescript Version

Also from Angular 17, they have updated the Typescript version to 5.2

Defer in Angular 17

To implement the lazy loading defer tool is there in the Angular new version. Assume we have many sections in the app(a section, b section, c section, d section).

D section is not visible in the screen and it visible only when we scroll down. So it would be better if we add defer in that section, then it will follow the lazy load architecture. In simple words, when that d sectionvisible in the screen then it will load the d section component.

@Component({
  selector: "app",
  template: `
    <h2>Main Page</h2>
    <a-section></a-section>
    <b-section></b-section>
    <c-section></c-section>
    @defer {
      <d-section> </d-section>
    }
  `,
})
export class AppComponent {}

Angular Dev Playground

Also from Angular 17, they have introduced the Angular Dev Playground.

🔹Angular Dev Playground -> https://angular.dev/playground

🙏 Happy Coding ❤️ Angular ❤️