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.

<ul *ngFor="let word of hList">
  <li>{{word}}</li>
</ul>

If we want to get the index of the array as well, we can do

<ul *ngFor="let word of hList; let i = index">
  <li>{{i}}: {{word}}</li>
</ul>

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");
  }
}