> For the complete documentation index, see [llms.txt](https://bharat-tiwari.gitbook.io/our-tech-journal/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bharat-tiwari.gitbook.io/our-tech-journal/angular-4/builtin-directives/directive/ngfor.md).

# ngForTemp

\*ngFor = built-in directive , used for creating a HTML template by iterating over a collection.

\* character before ngFor => a shortcut to create a parent template like ”template=ngFor let product of products”.

```javascript
<ul>
  <li *ngFor="let item of cafeMenu">{{ item.name }}</li>
</ul>
```

The above code will yield something like below:

```markup
<ul>
  <li>Tea</li>
  <li>Coffee</li>
  <li>Latte</li>
  <li>Mocha</li>
</ul>
```

\*ngFor also provides a set of few pre-defined constants for each iteration of the for-loop:

* `index` = number => current iteration's index value
* `first` = boolean => is it the first iteration?
* `last` = boolean => is it the last iteration?
* `even` = boolean => is the current iteration index an even value?
* `odd` = boolean => is the current iteration index an odd value?

```javascript
<ul>
  <li *ngFor="let item of cafeMenu; let i=index; let isOdd=odd; let isEven=even" [class.oddRow]="isOdd"  [class.evenRow]="isEven" >
    {{i + 1}}. {{ item.name }}
  </li>
</ul>
```

This will generate HTML like below:

```markup
<ul>
  <li class="evenRow">1. Tea</li>
  <li class="oddRow">2. Coffee</li>
  <li class="evenRow">3. Latte</li>
  <li class="oddRow">4. Mocha</li>
</ul>
```