[Angular 7][11] Kondisi If dan Esle Menggunakan ngIf

Hello, this is my website. Find all information about website design, website programming, HTML, CSS, Javascript, Jquery, Angular, Flutter, Plugin, Mockup, Mysql, Database, etc.

Tips & Trick



Card image cap
Thursday, 28 Mar 2019

Hello world,

Kondisi sering sekali digunakan dalam sebuah aplikasi. Dimana programmer menggunakan kondisi untuk membedakan sesuatu dalam sebuah kasus. Contohnya jika di dalam sebuah aplikasi terdapat beberapa role user yang berbeda maka setiap aksesnya akan dapat dibedakan menggunakan kondisi yaitu if else. Di dalam Angular untuk membuat kondisi if else kita dapat menggunakan ngIf atau ngSwitch (akan saya bahas selanjutnya). 

Contoh sederhana dalam penggunaan if adalah sebagai berikut. Jika kita memiliki sebuah property bernama title yang berisi string “namaweb”.

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


@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'namaweb';

}

Kemudian kita dapat menempatkan ngIf pada tag yang ingin kita gunakan sebagai kondisi.

<p *ngIf="title=='namaweb'" >Hello Namaweb</p>

Dari contoh kondisi di atas maka jika title benar berisi 'namaweb' maka tag p dan yang ada di dalamnya akan ditampilkan. Jika tidak maka tag p tidak akan ditampilkan. Contoh lain jika kita menggunakan else adalah sebagai berikut.

<ng-container *ngIf="title=='namaweb'; else elseTemplate">

  Hello

</ng-container>

<ng-template #elseTemplate>

  Siapa ya?

</ng-template>

Kalau dilihat pada contoh di atas, kondisi if title benar berisi 'namaweb' maka ng-container dan yang ada di dalamnya akan dijalankan. kemudian ada else elseTemplate (elseTemplate adalah penamaan yang bisa diubah sesuai kebutuhan) dimana referensinya adalah ke ng-template.

Selamat mencoba :)