====== Directive *ngFor ======
Assume we have a component called servers. ngFor takes an array, and loop them through. ''{{}}'' is the way to bind the value from JavaScript/Type Script to HTML. Of course, the ''hList'' in our example can be change dynamically, and the UI will refresh if it is changed.

{{ :ng:ngfor.png?nolink&400 |}}
===== servers.component.html =====
<code>
<ul *ngFor="let word of hList">
  <li>{{word}}</li>
</ul>
</code>

If we want to get the index of the array as well, we can do
<code>
<ul *ngFor="let word of hList; let i = index">
  <li>{{i}}: {{word}}</li>
</ul>
</code>

===== servers.component.ts =====
<code>
import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-servers',
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {
  hList: string[];

  constructor() {
  }

  ngOnInit() {
    this.hList = [];
    this.hList.push("apple");
    this.hList.push("banana");
    this.hList.push("cat");
    this.hList.push("dog");
    this.hList.push("egg");
  }
}
</code>