The ngFor directive allows us to iterate through a collection (or any other iterable object) and bind each of its items to a template of our choice, where we can define convenient placeholders to interpolate the item data. Each instantiated template is scoped to the outer context, where the loop directive is placed, so we can access other bindings. Let's imagine we have a component named Staff: it features a field named employees, which represents an array of Employee objects. We can enlist those employees and job titles in this way:

<ul>
  <li *ngFor="let employee of employees">
    Employee {{ employee.name }}, {{ employee.position }}
  </li>
</ul>

As we can see in the example provided, we turn each item fetched from the iterable object on each loop into a local reference so that we can easily bind this item in our template. A thing to highlight is that the expression starts with the keyword let.

This directive observes changes in the underlying iterable object and will add, remove, or sort the rendered templates as items are added, removed, or reordered in the collection.