Cara Menggunakan Arahan Sudut Bawaan: ngIf, ngFor, ngClass, dan Lainnya

Anda dapat menambahkan arahan ke HTML di proyek Angular Anda. Beberapa mengontrol struktur markup Anda sementara yang lain fokus pada atribut.

Artikel ini akan membahas enam arahan Angular yang paling umum: ngFor, ngIf, ngClass, ngStyle, ngModel, dan ngSwitch.

Apa itu Arahan Sudut?

Arahan sudut memungkinkan Anda untuk menggunakan pernyataan if dan for loop, dan menambahkan perilaku lain ke kode HTML proyek Angular.

Pengarahan	Keterangan
*ngJika	Anda dapat menggunakan ngIf ketika Anda ingin blok HTML tertentu hanya ditampilkan jika memenuhi kondisi tertentu. Misalnya, jika Anda memiliki formulir dengan pop-up yang ditampilkan setelah pengguna memasukkan input untuk bidang tertentu.
*ngUntuk	Anda dapat menggunakan ngFor jika Anda membutuhkan blok tertentu untuk diulang berkali-kali. Misalnya, jika Anda memiliki daftar item dan perlu menampilkan div untuk setiap item.
*ngClass	Ini menambahkan gaya bersyarat menggunakan kelas. Jika pernyataan if memenuhi kondisi, itu akan menerapkan kelas yang ditentukan.
*ngGaya	Ini menambahkan gaya in-line bersyarat. Jika pernyataan if memenuhi kondisi, itu akan menerapkan gaya yang ditentukan.
*ngModel	Ini memungkinkan Anda melakukan penjilidan dua arah. Ini berarti Anda dapat meneruskan data di kedua arah antara file HTML dan TypeScript. Misalnya, Anda dapat meneruskan nilai atribut dari file TypeScript ke file HTML, dan sebaliknya.
*ngBeralih	Ini memungkinkan Anda untuk menambahkan pernyataan switch dengan banyak kasus untuk memeriksa banyak nilai. Berdasarkan kasus, elemen HTML tertentu akan ditampilkan.

Arahan struktural melibatkan struktur elemen HTML. Ini termasuk ngIf, ngFor, dan ngSwitch. Arahan atribut melibatkan perubahan properti elemen HTML. Ini termasuk ngStyle, ngClass, dan ngModel.

Cara Menggunakan ngIf

Untuk menggunakan ngIf, Anda memerlukan kondisi untuk mengevaluasi ke true agar elemen HTML tertentu ditampilkan.

1. Tambahkan dua variabel ke file TypeScript Anda. Dalam contoh ini, ada variabel noPlaylists dan variabel untuk menyimpan playlist. Variabel ini akan bernilai true jika panjang larik daftar putar adalah 0.

   noPlaylists: boolean = false;
   daftar putar: apa saja = [];
   konstruktor() {}
    ngOnInit(): batal {
    if (this.playlists.length 0) {
    this.noPlaylist = benar;
    }
   }
   

2. Dalam HTML, tambahkan pernyataan *ngIf. Jika noPlaylists bernilai true, maka akan muncul pesan error yang terdapat pada span di bawah ini. Jika tidak, tidak akan. Anda dapat menerapkan ngIf ke berbagai jenis tag HTML.

   
   
   Tidak ada daftar putar yang tersedia.
   
   
   
   

3. Untuk menambahkan komponen "else" ke pernyataan if, Anda perlu menambahkan kode HTML untuk bagian "else" di blok template.

   
   
   Tidak ada daftar putar yang tersedia.
   
   
   
   
   
   
   Daftar putar ditemukan.
   
   
   
   

Cara Menggunakan ngFor

Jika Anda perlu mengulang sejumlah blok pada halaman, Anda dapat menggunakan direktif ngFor.

1. Dalam file TypeScript, tambahkan item ke array.

   daftar putar: apa saja = [
    {"name": "Rock", "numberOfSongs": 5},
    {"name": "Kontemporer", "numberOfSongs": 9},
    {"name": "Populer", "numberOfSongs": 14},
    {"name": "Acoustic", "numberOfSongs": 3},
    {"name": "Lagu Pernikahan", "numberOfSongs": 25},
    {"name": "Metal", "numberOfSongs": 0},
   ];
   

2. Dalam file HTML, tambahkan pernyataan *ngFor.

   Daftar putar ditemukan.
   
   
   
   
   {{daftar putar.nama}}
   {{playlist.numberOfSongs}} lagu
   
   
   
   
   
   
   

   Di dalam ngFor, Anda akan dapat mereferensikan setiap objek dalam array menggunakan variabel "daftar putar". "playlist.name" dan "playlist.numberOfSongs" akan mencetak kedua atribut di dalam menandai.

Cara Menggunakan ngClass

Anda dapat mengubah kelas gaya yang digunakan div tertentu, berdasarkan suatu kondisi.

1. Tambahkan dua kelas ke dalam file CSS dengan gaya yang berbeda. Anda dapat menambahkan jenis apa pun gaya CSS Anda inginkan, seperti warna latar belakang yang berbeda.

   .lagu {
    warna latar: #F7F5F2;
   }
   .noLagu {
    warna latar: #FFA8A8;
   }

2. Di dalam for-loop dari langkah sebelumnya, tambahkan direktif atribut ngClass. [ngClass]="playlist.numberOfSongs > 0? 'lagu': 'noSongs'" menggunakan yang sama operator ternary itu JavaScript dan penggunaan bahasa lainnya.

   
   
   
   
   {{daftar putar.nama}}
   {{playlist.numberOfSongs}} lagu
   
   
   
   
   

   Jika jumlah lagu lebih besar dari nol, kelas "lagu" akan diterapkan ke div. Ini akan memberi div warna latar belakang abu-abu. Jika tidak, jika jumlah lagu adalah nol, kelas "noSongs" akan diterapkan ke div. Ini akan memberi div warna latar belakang merah.

Cara Menggunakan ngStyle

Alih-alih menggunakan ngClass, Anda dapat menggunakan ngStyle jika Anda ingin menerapkan gaya sebaris alih-alih menata gaya melalui kelas.

1. Ubah ngClass dari langkah sebelumnya untuk menggunakan ngStyle sebagai gantinya.

   
   
   {{daftar putar.nama}}
   {{playlist.numberOfSongs}} lagu
   
   
   
   

[ngStyle]="{'background-color': playlist.numberOfSongs > 0? '#F7F5F2': '#FFA8A8', 'color': playlist.numberOfSongs > 0? 'hitam': 'biru tua' }"

MembagikanMembagikanMenciakMembagikanSurel

Topik-topik yang berkaitan

• Pemrograman
• Pemrograman
• JavaScript
• HTML
• CSS