TypeScript 2.x By Example

The *ngFor directive

The *ngFor directive is used to repeat a set of elements in dom. We define an HTML block for a single row and wrap it with *ngFor. When Angular encounters the *ngFor directive, it knows to repeat this HTML block a number of times, based on the expression evaluated in it. Let's look at the following example of using *ngFor:

<tbody>  <tr *ngFor='let article of latest_news.Articles'>    <td></td>    <td>{{ article.urlToImage }}</td>    <td>{{ article.title }}</td>    <td>{{ article.description }}</td>    <td>{{ article.author }}</td>    <td>{{ article.publishedAt }}</td>  </tr></tbody>

In the preceding example, we want to display each article in the row of a table. We define one table row and its child elements. This table row element and ...