Pada tutorial kali ini Konsep Koding akan berbagi tutorial Angular Series dalam Bahasa Indonesia, di artikel ini akan dijelaskan mengenai ngIf pada Angular dan penggunaannya serta penjelasan dan contoh penggunaan dari ngIf lengkap. 

tutorial-angular-ngif-penjelasan
tutorial-angular-ngif-penjelasan


 Apa itu ngIf di Angular?

Meskipun HTML juga merupakan bahasa markuo tersendiri, HTML tidak memiliki pernyataan if, tidak seperti Javascript misalnya.

Syntax Directive ngIf Angular pada dasarnya berfungsi sebagai pernyataan if untuk HTML, menambahkan fitur yang hilang ini ke bahasa di bawah bentuk atribut ngIf khusus hanya bisa dingunakan pada HTML dengan project Angular.

Contoh Penggunaan ngIf pada Angular

Pertama silahkan buat project baru Angular jika kamu belum memiliki project Angular

ng new konsep-koding

Kemudian jika sudah berhasil membuat project baru dengan Angular silahkan ubah pada file  app.component.ts menjadi seperti kode di bawah ini :

<h1 *ngIf="isColorGreen" style="color: green">Hello Im Green</h1>
<h1 *ngIf="!isColorGreen">Color is not green</h1>

<router-outlet></router-outlet>

Kemudian ubah juga di bagian file app.component.ts menjadi seperti di bawah ini:


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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'konsep-koding';
  isColorGreen: boolean = true;
}
Setelah itu hasilnya akan seperti gambar di bawah ini, karena isColorGreen memiliki value true.



Sekian semoga artikel Konsep Koding mengenai Angular untuk dircetive ngIf dapat bermanfaat dan membantu kamu yang sedang mempelajari Framework Angular.