Fungsi ng-class pada AngularJS

Pada AngularJS memiliki banyak sekali fitur pembantu untuk kalian dalam membuat tampilan menjadi lebih interaktif lagi. Untuk itu untuk orang yang masih belajar perlu sekali untuk mengeksplor kemampuan angularnya dengan membaca dokumentasi yang telah diberikan. Agar kedepanya apabila mengalami kesulitan bisa mencari jawabanya dari dokumentasi tersebut. Seperti artikel yang akan kita bahas adalah mengenai fungsi ng-class pada AngularJS.

Fungsi ng-class ini adalah salah satu fungsi yang ada pada AngularJS untuk melakukan perubahan pada suatu class pada HTML secara langsung. Artinya apabila terjadi perubahan pada class html langsung berubah pada saat itu juga tanpa mereload halaman terlebih dahulu. Tentu fungsi ini akan sangat berguna bagi kalian yang ingin websitenya lebih dinamis. Lalu bagaimana cara penggunaanya ? mari kita ikuti langkah berikut ini. Pertama tentu kalian harus buat halaman utamanya terlebih dahulu. Untuk mempersingkat waktu kalian bisa salin contoh code dibawah ini.

index.html

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<style>
.sky {
    color:white;
    background-color:lightblue;
    padding:20px;
    font-family:"Courier New";
}
.tomato {
    background-color:coral;
    padding:40px;
    font-family:Verdana;
}
</style>
<body ng-app="">

<p>Ganti a class:</p>

<select ng-model="home">
<option value="sky">Sky</option>
<option value="tomato">Tomato</option>
</select>

<div ng-class="home">
  <h1>Mancing mania </h1>
  <p>Mantap !</p>
</div>

</body>
</html>

Setelah sudah disalin kalian bisa simpan file tersebut dengan format .html. Untuk melihat hasilnya kalian bisa langsung buka file berusan pada browser kesayangan kalian. Jika berhasil maka tampilanya akan seperti ini.

fungsi-ng-class-pada-angularjs-rangga1-250717

Gambar diatas adalah gambar awal. Kalian bisa coba klik menu dropdown dan pilih salah satu menu yang ada.

fungsi-ng-class-pada-angularjs-rangga2-250717

Jika kalian pilih menu sky, maka secara otomatis tulisan yang berada pada ng-class berubah style cssnya menjadi seperti class CSS sky. Dan bila kalian pilih menu yang satunya lagi maka stylenya pun akan berubah kembali sesuai class yang dipilih.

fungsi-ng-class-pada-angularjs-rangga3-250717

mudah bukan ?

Sekian pembahasan mengenai bagaimana cara penggunaan fungsi ng-class pada AngularJS. Semoga artikel kali ini bermanfaat dan menjadi inspirasi bagi kalian semua. Sampai jumpa pada artikel menarik dan tidak kalah seru lagi pada kesempatan selanjutnya.

DUMET School Author

DUMET School adalah tempat kursus website, kursus desain grafis, kursus digital marketing, kursus video editing dan kursus mobile apps terbaik di Jakarta dan Depok.

Leave a Reply

Your email address will not be published.