Directive Built-in ngSwitch

by

Directive ngSwitch mirip dengan switch block pada bahasa programming.

Untuk jelasnya, mari buka app.component.ts, tambahkan property value = 5.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'My Angular Apps';
  value = 5;
}

Buka file app.component.html, tambahkan code berikut.

<div [ngSwitch]="value">
    <p *ngSwitchCase="5">Value adalah 5</p>
    <p *ngSwitchCase="10">Value adalah 10</p>
    <p *ngSwitchDefault>Default</p>
</div>

Jika Anda jalankan, sesuai ekspektasi, pada browser akan ditampilkan teks “Value adalah 5”.

Sharing is caring:

Leave a Comment