Mengubah Gaya secara Dinamis di Angular

Dengan menggunakan direktif ngClass dan ngStyle, kita dapat mengikat ekspresi ke elemen, sehingga gaya kita akan berubah secara dinamis.

Mari kita buat teks agar disembunyikan atau ditampilkan menggunakan properti active dari kelas komponen:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

Untuk itu, tulis fungsi toggle, yang akan mengaktifkan atau menonaktifkan properti ini secara bergantian:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

Dalam file CSS komponen, atur gaya berikut untuk kelas:

app/app.component.css.hidden {
  display: none;
}

Di template komponen, buat sebuah div, dan tambahkan kelas CSS hidden ke dalamnya, yang akan dihidupkan atau dimatikan tergantung pada properti active dari kelas komponen:

app/app.component.html<div [ngClass]="{hidden: active}">
  text
</div>

Buat juga tombol, yang ketika ditekan akan memanggil metode toggle, menampilkan atau menyembunyikan komponen kita:

app/app.component.html<button (click)="toggle()">
  toggle
</button>