Jika Anda telah berkecimpung di industri pengkodean untuk beberapa waktu sekarang, Anda mungkin sudah tahu bahwa mengembangkan variasi dinamis bisa menjadi tugas yang cukup besar dalam aplikasi web. Bergantung pada platform pemrograman yang Anda pilih untuk menggunakan tingkat kerumitan yang cenderung bervariasi, tetapi untungnya prestasi ini dapat dengan mudah dicapai di Angular 8 dan beberapa versi Angular sebelumnya juga. Pada artikel ini, kita akan membahas ngstyle di agular 8.
Sintaks Properti Template di Angular 8
Sebelum kita membahas lebih dalam tentang semua fungsi dan modul yang dimiliki Angular 8, mari kita lihat sintaks properti di Angular 8 terlebih dahulu dan bagaimana kita dapat mengubah warna properti warna di Java murni.
let myDiv = document.getElementById ('my-div') myDiv.style.color = 'orange' // memperbarui div melalui propertinya
Mari kita melakukan tugas yang sama di Angular 8 dengan menggunakan perpustakaan bawaan serta modul lainnya.
gaya menggunakan sintaks properti, teks ini berwarna oranye
Gunakan sintaksis {property} dan dapatkan kode secara efisien dan lakukan perubahan hampir secara instan.
Pada contoh di atas, apa yang telah kita lakukan diakses secara langsung ke properti gaya elemen div. Dibandingkan dengan properti pada objek dan atribut DOM, ini berbeda.
Dengan menggunakan karakteristik Angular 8 bawaan, kita dapat menambahkan elemen CSS ke kelas apa pun pilihan kita. Lihat contoh di bawah untuk memahami ini lebih baik.
Kelas CSS menggunakan sintaks properti, teks ini berwarna biru
NgClass dan NgStyle di Angular 8
Itu built-in dengan ngSyntax dan ngClass di Angular 8 dan ini dapat digunakan untuk menyesuaikan dengan berbagai tujuan. Dengan cara tertentu, modul bawaan menyediakan gula untuk mengimplementasikan perubahan pada string yang lebih kompleks daripada yang lain. Mari kita lihat sintaks ngStyle di Angular 8.
gaya menggunakan ngStyle
Dalam contoh di atas kita telah menggunakan ngStyle di Angular untuk mengubah dinamika beberapa elemen di kelas kita, sementara di kelompok yang sama beberapa elemen bersama-sama untuk memfasilitasi pengguna untuk menyesuaikan kelas sesuai dengan kebutuhannya.
Kelanjutan dari contoh di atas.
gaya menggunakan ngStyle + -
Sekarang setelah Anda mengetahui tentang ngStyle, mari kita lihat beberapa elemen ngStyle.
array kelas-kelas string kelas-kelas objek kelas
ngClass in angular juga memungkinkan kita untuk membuat perubahan pada kode kita dengan banyak cara sehingga perubahan dinamis dapat diimplementasikan dalam sekejap, seperti ngStyle.
Lihat contoh di bawah ini, untuk melihat keduanya beraksi.
impor {Komponen} dari '@ angular / core' @Component ({selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css']}) kelas ekspor AppComponent {color = 'pink' size = 16 displayText = 'show-class' visible = true constructor () {} toggle () {this.visible =! this.visible this.displayText = this.visible? 'show-class': 'hide-class'}}
NgClick di Angular 8
Sekarang setelah Anda mengetahui fitur dasar ngClass dan ngStyle dan apa yang dapat dicapai dengan menggunakan salah satu atau keduanya di platform Angular 8, mari kita lihat penggunaan ngClick.
java memiliki-hubungan
Apa itu ngClick?
Jika dalam acara tertentu Anda perlu mengikat beberapa elemen program, sehingga satu tugas dapat dicapai, maka Anda perlu menggunakan ngClick.
Di atas adalah contoh bagaimana ngClick digunakan di AngularJS. Ketika datang ke Angular8, modul yang sama tidak ada, dan dengan demikian kita perlu menggunakan yang berikut ini.
Sintaks di atas digunakan untuk memfasilitasi event binding di Angular8, di mana pertama-tama kita mendefinisikan nama event target bersama dengan tanda kurung dan kemudian menyertakan pernyataan template dengan menyertakan kutipan serta operator yang sama. Setelah langkah-langkah ini selesai, Angular8 menyiapkan penangan kejadian untuk kejadian ini dan setiap kali dipicu, kejadian ini dijalankan.
Angular8 bukan hanya salah satu bahasa pemrograman paling populer di luar sana, tetapi juga salah satu yang paling dinamis, berkat beragam fiturnya. Dengan ini, kita sampai pada akhir artikel tentang NgStyle ini secara bersudut. Saya harap Anda memahami cara kerjanya.
lihat oleh Edureka. Angular adalah kerangka kerja JavaScript yang digunakan untuk membuat aplikasi web sisi klien yang skalabel, perusahaan, dan kinerja. Dengan adopsi kerangka kerja Angular yang tinggi, manajemen kinerja aplikasi didorong oleh komunitas secara tidak langsung mendorong peluang kerja yang lebih baik. Pelatihan Sertifikasi Angular bertujuan untuk mencakup semua konsep baru ini seputar Pengembangan Aplikasi Perusahaan.