Angular Ngswitch: Cara Menggunakan Ngswitch Dalam Angular 13 – Codewithaden

Petunjuk struktural Angular ngswitch menambahkan atau menghapus template (menampilkan atau menyembunyikan tampilan) ketika ekspresi pertandingan berikutnya cocok dengan ekspresi sakelar. Petunjuk Ngswitch memungkinkan Anda menyembunyikan/menunjukkan elemen HTML tergantung pada perasaan.

Angular Ngswitch

Angular Ngswitch adalah arahan bawaan yang digunakan untuk menukar struktur DOM secara kondisional pada templat Anda berdasarkan ekspresi lingkup. Ngswitch memilih salah satu elemen bersarang dan membuatnya terlihat berdasarkan item mana yang cocok dengan nilai yang diperoleh dari ekspresi yang dievaluasi.

Elemen dalam Ngswitch tetapi tanpa arahan NgswitchDefault akan dipertahankan di lokasi yang ditentukan dalam templat.

Dengan kata lain, Anda mendefinisikan elemen wadah (di mana Anda menempatkan arahan), tempatkan ekspresi pada atribut on = “…” (atau atribut ngswitch = “…”, tentukan item dalam apa pun di dalam arahan, dan tempatkan A saat atribut per item.

Ketika atribut digunakan untuk menginformasikan NgSwitch, item mana yang akan ditampilkan saat ekspresi ON dievaluasi, jika ekspresi pencocokan tidak ditemukan melalui atribut When, maka elemen dengan atribut default ditampilkan.

Itu [Ngswitch] Arahan pada wadah menentukan ekspresi yang cocok dengan.

Ekspresi yang cocok disediakan oleh arahan ngswitchcase pada tampilan di dalam wadah.

  1. Setiap tampilan yang cocok diterjemahkan.
  2. Jika tidak ada kecocokan, tampilan dengan arahan ngswitchdefault diberikan.
  3. Elemen dalam [Ngswitch] pernyataan tapi di luar apapun Ngswitchcase atau NgswitchDefault Petunjuk dilestarikan di lokasi.

Tentukan elemen kontainer untuk arahan dan tentukan ekspresi sakelar yang cocok dengan atribut.

 

Di dalam wadah, *pernyataan Ngswitchcase menentukan ekspresi kecocokan sebagai atribut.

Sertakan *ngswitchDefault sebagai kasus terakhir.


   ...
...
   ...
 

Pemilih

[ngSwitch] 

Properti

PropertiKeterangan
@Memasukkan()

Ngswitch: apapun
Hanya menulis

Contoh Ngswitch

Mari kita bayangkan kita ingin menampilkan nama acara dalam warna yang berbeda tergantung di mana mereka streaming.

Dengan kerangka kerja bootstrap, kita dapat mengubah warna teks menggunakan kelas-penggeram teks, kesucian teks, peringatan teks, dan kelas teks-primer.

Kita bisa selesaikan ini dengan memiliki serangkaian pernyataan *NGIF, seperti itu,

  • {{ show.name }} ({{ show.name }})
  • {{ show.name }} ({{ show.name }})
  • {{ show.name }} ({{ show.country }})
  • {{ show.name }} ({{ show.country }})

Ini awalnya tampaknya masuk akal sampai kita membuat item gaya lainnya.

Kami harus memeriksa untuk melihat apakah acara itu bukan dari salah satu layanan yang ditentukan sebelumnya.

Menghasilkan ekspresi NGIF yang cukup panjang, dan itu hanya akan semakin buruk ketika kita menambahkan layanan baru.

Sebagian besar bahasa, termasuk JavaScript atau naskah, memiliki konstruksi bahasa yang disebut pernyataan switch untuk menyelesaikan masalah semacam ini.

Angular juga memberi kita fungsionalitas yang sama melalui Ngswitch Directive.

Petunjuk ini memungkinkan kami untuk membuat item yang berbeda tergantung pada kondisi yang diberikan, dan pada kenyataannya, arahan ngswitch adalah beberapa arahan yang bekerja bersama.

Oke, mari kita selami contoh.

Langkah 1: Instal Proyek Angular

Ketik perintah berikut.

ng new angular-ngswitch 

Saat Anda menginstal proyek sudut baru, lihat opsi yang mereka sediakan saat membuat proyek baru. Sebagai contoh , kita membutuhkan modul routing untuk memungkinkan sudut CLI untuk menghasilkan modul routing untuk kita dalam proyek ini.

saya menggunakan Kode Studio Visual sebagai editor pemrograman untuk mengembangkan aplikasi sudut.

Sekarang, masuk ke dalam folder dan buka proyek di dalam vScode.

Langkah 2: Tulis data demo di file app.component.ts

Tulis kode berikut di dalam app.component.ts mengajukan.

// app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  shows: any[] = [
    {
      name: 'Stranger Things',
      service: 'Netflix',
    },
    {
      name: 'The Mandalorian',
      service: 'Disneyplus',
    },
    {
      name: 'Game of Thrones',
      service: 'HBOMax',
    },
    {
      name: 'Amazon Prime',
      service: 'Fleabag',
    }
  ];
}
 

Dalam kode di atas, kami telah menambahkan Himpunan dari objek untuk menggunakannya dalam pernyataan sakelar sudut.

Langkah 3: Tulis file view app.component.html.

Sekarang, dalam file ini, kami menyertakan arahan ngswitch.

NgSwitch Example

  • {{ show.name }} ({{ show.service }})
  • {{ show.name }} ({{ show.service }})
  • {{ show.name }} ({{ show.service }})
  • {{ show.name }} ({{ show.service }})

Kami mengikat ekspresi ke arahan ngswitch.

Petunjuk Angular Ngswitchcase memungkinkan kita mendefinisikan kondisi yang akan membuat item yang dilampirkan jika cocok dengan ekspresi.

Jika tidak ada kondisi yang dipenuhi dalam pernyataan switch, itu akan memeriksa untuk melihat apakah ada arahan ngswitchdefault; Jika ada, itu akan membuat elemen yang melekat padanya. Namun, itu opsional, dan jika tidak ada, itu tidak akan menampilkan apa pun jika tidak ada arahan Ngswitchcase yang cocok ditemukan.

Perbedaan utama antara solusi NGIF adalah bahwa dengan menggunakan Angular Ngswitch, kami mengevaluasi ekspresi hanya sekali dan kemudian memilih elemen yang akan ditampilkan berdasarkan hasilnya.

Mari kita lihat output berikut.

ngswitch

Kasing Ngswitch dalam contoh di atas hanyalah sebuah contoh dan bukan cara yang efisien untuk menyelesaikan masalah ini. Ini hanyalah demo dan contoh praktis menggunakannya di dalam proyek reguler kami.

Kami akan menggunakan baik Ngstyle atau NGClass Arahan untuk contoh di atas.

Dengan menggunakan NGIF, kami dapat secara kondisional menambah atau menghapus elemen dari DOM.

Jika kita dihadapkan dengan beberapa kondisi, alternatif yang lebih bersih untuk beberapa pernyataan NGIF bersarang adalah serangkaian arahan Ngswitch.

Mari kita hapus beberapa properti dari objek pertunjukan.

Tulis kode berikut di dalam app.component.ts mengajukan.

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  shows: any[] = [
    {
      name: 'The Mandalorian',
      service: 'Disneyplus',
    }
  ];
}
 

Sekarang, kita hanya memiliki satu properti Mandalorian, dan sekarang kita hanya akan melihat satu pertunjukan di layar. Simpan file, dan Anda hanya akan melihat Mandalorian yang akan muncul di layar.

Itu berarti hanya properti ini yang cocok dengan ekspresi sakelar dan mencetak di layar.

Itu untuk tutorial ini.

Pos terkait

Operasi CRUD Angular

Bentuk sudut

HTTPClient Angular

Routing sudut

Cara memperbarui sudut cli

Artikel ini berasal dari website Winpoin, dan kemudian diterjemahkan ke bahasa indonesia, baca artikel asli disini

Leave a Reply

Your email address will not be published. Required fields are marked *