Angular Template Looping Syntax
December 10, 2015
angulartypescript
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
If you to learn more about TypeScript, you may find my free TypeScript course useful:
Learn TypeScript
You might find some of my other posts interesting: