Angular NGClass: Cara menggunakan NGClass di Angular 13 – Codewithaden

Itu NGClass Arahan dalam Angular digunakan untuk mengatur kelas CSS secara dinamis berdasarkan kondisi khusus. Itu berperilaku sangat mirip dengan apa NGClass Dulu lakukan di AngularJS.

Jika Anda baru di Angular, lihat ini Crud sudut artikel.

Angular ngclass

Angular ngclass adalah arahan bawaan yang memungkinkan Anda untuk mengatur CSS kelas secara dinamis untuk Dom elemen. Arahan NGClass menambah dan menghapus kelas CSS pada elemen HTML.

Properti NGClass Angular

PropertiKeterangan
@Input (‘kelas’)

Kelas: String
Hanya menulis
@Memasukkan()

NGClass: String | string [] | Atur | {[class: string]: any; }
Hanya menulis

Anda dapat memperbarui kelas CSS berdasarkan jenis pilihan ekspresi.

  1. Rangkaian -Kelas CSS yang tercantum dalam string (ruang-batas) ditambahkan,
  2. Himpunan – Kelas CSS dinyatakan sebagai elemen array ditambahkan,
  3. Obyek – Kunci adalah kelas CSS yang ditambahkan ketika ekspresi yang diberikan dalam nilai mengevaluasi nilai sebenarnya. Jika salah, maka mereka dihapus.

Pemilih Arahan NGClass adalah [ngclass]. Bergantung pada jenis evaluasi, kami akan menetapkan nilai kelas untuk ini NGClass Directive.

Salah satu kasus penggunaan paling utama dari NGClass adalah bahwa kita dapat mengaktifkan atau menonaktifkan kelas, tergantung pada keadaan aplikasi dengan NGClass.

Sebelum kita melakukan itu, kita melihat bagaimana kelas CSS ditugaskan menggunakan JavaScript biasa dan kemudian membandingkannya dengan cara sudut.

Metode NGClass

ngdocheck ()

NGDocheck () adalah metode panggilan balik yang melakukan deteksi perubahan yang dipanggil setelah detektor perubahan default berjalan.

Angular Docheck () adalah kait siklus hidup yang memanggil fungsi deteksi perubahan khusus untuk arahan, di samping cek yang dilakukan oleh detektor perubahan default.

Implementasi Kelas

  1. NGClass
  2. Ngforof
  3. Ngstyle
  4. Ngswitchcase
  5. Upgradecomponent

Oke, sekarang mari kita lihat arahan NGClass sedang beraksi.

Langkah 1: Instal Aplikasi Angular

Jika Anda tidak memiliki CLI sudut terbaru, Anda perlu memperbarui CLI Anda. Untuk panduan lebih lanjut, lihat ini tutorial

Sekarang, buat proyek baru menggunakan perintah berikut.

Install

Sekarang, masuk ke dalam folder dan buka folder Kode Studio Visual

Selanjutnya, instal Bootstrap 4 CSS Kerangka menggunakan perintah berikut.

npm install bootstrap --save 

Sekarang, tambahkan Bootstrap CSS file di dalam Angular.json mengajukan.

"styles": [
    "src/styles.css",
    "./node_modules/bootstrap/dist/css/bootstrap.min.css"
], 

Langkah 2: Buat file model.

Di dalam SRC >> Aplikasi folder, buat a Singer.ts mengajukan dan menambahkan kode berikut di dalamnya.

// Singer.ts

export default class Singer {
    artist: String;
    country: String;
}
 

Jadi, array data kami memiliki dua properti. 1) Artis, 2) Negara.

Sekarang, tulis kode berikut di dalam app.component.ts mengajukan.

// app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    singers: Singer[] = [
       {
	  'artist': 'Michael Jackson',
	  'country': 'USA'
	},
	{
	  'artist': 'Justin Bieber',
	  'country': 'Canada'
	},
	{
	  'artist': 'Daddy Yankee',
	  'country': 'Purto Rico'
	},
	{
	   'artist': 'A R Rehman',
	    'country': 'India'
	},
	{
	    'artist': 'Selena Gomez',
	    'country': 'USA'
	}
   ];
}
 

Jadi, berdasarkan data, kami menetapkan kelas ke halaman HTML, dan untuk melakukannya, kami perlu menggunakan NGClass Directive.

Langkah 3: Letakkan arahan NGClass di halaman HTML

Dalam app.component.html file, kita membutuhkan rendering bersyarat.

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


NgClass

{{ celeb.artist }} ({{ celeb.country }})

Di sini, kami telah menggunakan Obyek Penilaian di mana kunci adalah kelas CSS yang ditambahkan ketika ekspresi yang diberikan dalam nilai mengevaluasi nilai kebenaran. Kalau tidak, mereka dihapus.

Saya telah membandingkan negara Singer, dan itu akan menetapkan kelas teks tertentu jika cocok.

Simpan file, buka terminal, dan mulai server pengembangan sudut.

ng serve --open 

Ini akan membuka browser, dan sekarang Anda dapat melihat bahwa kita dapat melihat warna teks yang berbeda menurut negara Singer.

Angular Sintaks alternatif dari NGClass sudut

Seperti kerangka kerja aplikasi satu halaman lainnya, sudut bersinar dalam hal pengikatan data. Itu berarti bahwa DOM secara otomatis diperbarui setiap kali objek JavaScript yang sesuai berubah. Ini sama untuk kelas CSS.

Kami juga dapat mengatur kelas pada elemen dengan mengikat ke input Properti ditelepon kelas , menyukai [class] = “‘ Text-Info ‘”.

Di sini satu hal yang perlu diperhatikan adalah bahwa ‘Teks-Info’ dibungkus dengan kutipan tunggal, jadi ketika dievaluasi sebagai JavaScript, itu tidak memperlakukan kesucian teks sebagai variabel.

Jika kami ingin menambahkan Info teks ke daftar kelas yang sudah ditetapkan pada item, kami dapat menggunakan sintaks yang diperluas [class. ] = ‘ekspresi yang benar’

Lihat cuplikan kode berikut.

[class.text-info]="true"
 

Cara Mengaktifkan Kelas CSS dalam Angular

Sintaks yang ditunjukkan di atas cukup tidak nyaman ketika datang ke kelas CSS berdasarkan suatu kondisi.

Cara yang lebih baik untuk melakukan ini adalah dengan menggunakan class.name pengarahan. Dengan arahan itu, kita dapat dengan mudah beralih kelas CSS seperti itu.

Seperti yang Anda lihat, arahan ini dimulai dengan kata kunci “kelas”, diikuti dengan nama kelas CSS yang ingin Anda beralih, dipisahkan oleh titik. Meskipun sintaks ini tidak jauh lebih pendek, ia memiliki keuntungan bahwa maknanya jelas pada pandangan pertama: kami ingin beralih kelas.

Menggunakan sintaks umum yang ditunjukkan pada bab sebelumnya tidak terjadi. Programmer harus membaca seluruh pernyataan sebelum jelas apa yang dilakukannya.

Menggunakan arahan NGClass untuk kenyamanan

Ternyata arahan NGClass dapat menggantikan semua metode yang kami temukan di atas.

Petunjuk ini hanyalah gula sintaksis untuk membuat kode terlihat lebih ramping. Dalam beberapa kasus, ini juga lebih pendek atau lebih nyaman untuk digunakan.

Petunjuk itu sendiri sangat fleksibel. Tergantung pada inputnya, ia dapat melakukan banyak hal yang berbeda.

Misalnya, jika kami hanya ingin menetapkan nama kelas statis, kami ingin yang berikut ini.

 Div [ngclass]     contoh-kelas '      Div   

Kesimpulan

Angular Versi 2,…, 10 menyediakan beberapa cara untuk menambahkan kelas secara kondisional; Mari kita lihat satu per satu jenis.

ketik satu

 kelas   myc  gadis  ] =  "prop === 'prop'"   

tipe dua

 NGClass  ] =  "{'myclass': prop === 'prop'}"   

dan beberapa opsi:

 NGClass  ] =  "{'myclass': prop === 'prop', 'myclass2': prop === 'prop'}"   

tipe tiga

 NGClass  ] =  "{1: 'myclass1', 2: 'myclass2', 3: 'myclass4'} [prop]"   

tipe empat

 NGClass  ] =  "(prop == 'prop')? 'my-class1': 'my-class2'"   

Keduanya Ngstyle dan arahan NGClass dapat digunakan untuk mengatur tampilan dan nuansa aplikasi Anda secara kondisional.

Ngstyle memberi Anda kontrol berbutir halus pada properti individual, tetapi jika Anda ingin membuat perubahan pada beberapa properti sekaligus, membuat kelas yang mengikat properti tersebut dan menambahkan kelas dengan

NGClass lebih masuk akal.

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 *