🅰️1️⃣7️⃣ What is the correct way to write a for loop wi...

Return to site

🅰️1️⃣7️⃣ What is the correct way to write a for loop with the new @-syntax in Angular 17?

· angular

A) @for (let item of items; track item.id) { <li> { { item.name }} </li> }
B) @for (let item in items; track item.id) { <li> { { item.name }} </li> }
C) @for (let item of items; trackBy item.id) { <li> { { item.name }} </li> }
D) @for (let item in items; trackBy item.id) { <li> { { item.name }} </li> }

Answer:

The correct answer is A. The new @-syntax uses the of keyword to iterate over an iterable object and the track parameter to specify the tracking expression, similar to the trackBy function in the *ngFor directive¹². The in keyword and the trackBy parameter are not valid in the new @-syntax.

Learn Angular 🅰️

(1) Angular 17: New control flow syntax | by Alain Chautard | Nov, 2023 .... https://blog.angulartraining.com/angular-17-new-control-flow-syntax-4fbec4772d04.

(2) Angular 17: Enhanced Control Flow Simplified with Examples. https://www.techiediaries.com/angular-17-new-control-flow-examples/.

(3) Angular 17 due in November with syntax for control flow. https://www.infoworld.com/article/3707310/angular-17-due-in-october-with-syntax-for-control-flow.html.

(4) Angular templates got better - the Control Flow syntax. https://blog.ninja-squad.com/2023/10/11/angular-control-flow-syntax/.

(5) Unveiling Angular 17: The Future Brings Novel Syntax for Control Flow .... https://appmaster.io/news/unveiling-angular-17-novel-syntax-control-flow-deferrable-loading.