Angular 2 - Arahan

SEBUAH directiveadalah elemen HTML khusus yang digunakan untuk memperluas kekuatan HTML. Angular 2 memiliki arahan berikut yang dipanggil sebagai bagian dari modul BrowserModule.

• ngif
• ngFor

Jika Anda melihat file app.module.ts, Anda akan melihat kode berikut dan modul BrowserModule ditentukan. Dengan mendefinisikan modul ini, Anda akan memiliki akses ke 2 arahan.

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';

@NgModule ({
   imports:      [ BrowserModule ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
export class AppModule { }

Sekarang mari kita lihat setiap arahan secara detail.

ngIf

Itu ngif elemen digunakan untuk menambahkan elemen ke kode HTML jika bernilai true, jika tidak, elemen tidak akan ditambahkan ke kode HTML.

Sintaksis

*ngIf = 'expression'

Jika ekspresi bernilai true maka koresponden akan ditambahkan, jika tidak elemen tidak ditambahkan.

Sekarang mari kita lihat contoh bagaimana kita bisa menggunakan direktif * ngif.

Step 1- Pertama tambahkan properti ke kelas bernama appStatus. Ini akan menjadi tipe Boolean. Mari kita pertahankan nilai ini sebagai benar.

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

@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appStatus: boolean = true;
}

Step 2 - Sekarang di file app.component.html, tambahkan kode berikut.

<div *ngIf = 'appStatus'>{{appTitle}} Tutorialspoint </div>

Pada kode di atas, kita sekarang memiliki direktif * ngIf. Dalam direktif kami mengevaluasi nilai properti appStatus. Karena nilai properti harus bernilai true, itu berarti tag div harus ditampilkan di browser.

Setelah kami menambahkan kode di atas, kami akan mendapatkan output berikut di browser.

Keluaran

ngFor

Itu ngFor elemen digunakan untuk elemen berdasarkan kondisi loop For.

Sintaksis

*ngFor = 'let variable of variablelist'

Variabel adalah variabel sementara untuk menampilkan nilai di variablelist.

Sekarang mari kita lihat contoh bagaimana kita bisa menggunakan direktif * ngFor.

Step 1- Pertama tambahkan properti ke kelas bernama appList. Ini akan menjadi tipe yang dapat digunakan untuk mendefinisikan semua tipe array.

import { Component } from '@angular/core';
 
@Component ({
   selector: 'my-app',
   templateUrl: 'app/app.component.html'
})

export class AppComponent {
   appTitle: string = 'Welcome';
   appList: any[] = [ {
      "ID": "1",
      "Name" : "One"
   },

   {
      "ID": "2",
      "Name" : "Two"
   } ];
}

Karenanya, kami mendefinisikan appList sebagai array yang memiliki 2 elemen. Setiap elemen memiliki 2 sub properti sebagai ID dan Nama.

Step 2 - Di app.component.html, tentukan kode berikut.

<div *ngFor = 'let lst of appList'> 
   <ul> 
      <li>{{lst.ID}}</li> 
      <li>{{lst.Name}}</li> 
   </ul> 
</div>

Pada kode di atas, kita sekarang menggunakan direktif ngFor untuk melakukan iterasi melalui array appList. Kami kemudian menentukan daftar di mana setiap item daftar adalah ID dan parameter nama dari array.

Setelah kami menambahkan kode di atas, kami akan mendapatkan output berikut di browser.

Keluaran