Carl Rippon

Building SPAs

Carl Rippon
BlogBooks / CoursesAbout
This site uses cookies. Click here to find out more

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

Learn TypeScript
Take a look

Want more content like this?

Subscribe to receive notifications on new blog posts and courses

Required
© Carl Rippon
Privacy Policy