Angular Template Looping Syntax

Assuming we have a products array as follows …

var products = [{ "id": 1, "name": "Milk" }, { "id": 2, "name": "Bread" }, ...]

… we could output these products using the following looping syntax in Angular 1 …

<ul>
  <li ng-repeat="product in products">{{product.name}}</li>
</ul>

This is similar In Angular 2 …

<ul>
  <li *ngFor="#product of products">{{product.name}}</li>
</ul>

So, simular-ish syntax. The key differences are …

• We now use the NgFor directive
• Rather than dealing with $scope, we now set local variables using the # prefix

Learn React with TypeScript - 3rd Edition

New

A comprehensive guide to building modern React applications with TypeScript. Learn best practices, advanced patterns, and real-world development techniques.

View on Amazon