Angular'da Dinamik Stil Değişikliği

ngClass ve ngStyle direktifleri sayesinde ifadeleri elementlere bağlayabiliriz, böylece stillerimiz dinamik olarak değişecek.

Bileşenin active özelliği kullanılarak metnin gizlenmesi veya gösterilmesini sağlayalım:

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

Bunun için, bu özelliği dönüşümlü olarak açıp kapatacak olan toggle fonksiyonunu yazalım:

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

Bileşenin CSS dosyasında şu stili tanımlayalım:

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

Bileşen şablonunda bir div oluşturalım ve bileşen sınıfındaki active özelliğine bağlı olarak açılıp kapanacak hidden CSS sınıfını ekleyelim:

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

Ayrıca, tıklandığında toggle yöntemini çağırarak bileşenimizi gösteren veya gizleyen bir buton yapalım:

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