Angular - Using inbuilt directives

import { Component, OnInit } from '@angular/core';


@Component({
  selector: 'app-built-in-directives-demo',
  templateUrl: './built-in-directives-demo.component.html',
  styleUrls: ['./built-in-directives-demo.component.css']
})
export class BuiltInDirectivesDemoComponent implements OnInit {

  items= ['A', 'B', 'C', 'D'];
  timeOfDay= 'morning';
  constructor() { }

  ngOnInit() {
  }

}

Template using Directives

<p>
Directives demo
</p>
<div *ngFor="let item of items; let i=index;">{{i}}:{{item}}</div>
<hr/>
<hr/>
<div [ngSwitch]="timeOfDay">
  <p *ngSwitchCase="'morning'">Good Morning</p>
  <p *ngSwitchCase="'afternoon'">Good Afternoon</p>
  <p *ngSwitchDefault>Good Evening</p>
</div>