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">

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>
import {Component, OnInit} from '@angular/core';

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

  constructor() {

  ngOnInit() {
    this.hList = [];
  • ng/directive_ngfor.txt
  • Last modified: 2019/11/18 17:24
  • by chongtin