Angular'da CSS Sınıflarını Toplu Bağlama

ngClass direktifi ile bir etiketteki bir dizi CSS sınıfını açıp kapatabilirsiniz. Direktif, anahtarlarının sınıflar olduğu ve değerlerinin boolean değerler olduğu bir nesneyi değer olarak alır. Bir sınıf, değeri true olarak ayarlandığında etkin olacak, false olarak ayarlandığında ise devre dışı kalacaktır.

Pratikte görelim. Aşağıdaki sınıflara sahip olduğumuzu varsayalım:

app/app.component.css.blue {
  color: blue;
}

.bold {
  font-weight: bold;
}

Bir blok için bu sınıfları nasıl açıp kapatacağımızı örneklerle görelim.

Örnek

Bir sınıfı açalım ve diğerini kapatalım:

app/app.component.html<div [ngClass]="{blue: true, bold: false}">
  text
</div>

Örnek

Sınıf durumlarının bileşen sınıfının özelliklerinde saklandığını varsayalım:

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = true;
  public isBold: boolean = false;
}

Sınıfın görünürlüğünü özelliklerimizin değerlerine bağlı olarak ayarlayalım:

app/app.component.html<div [ngClass]="{blue: isBlue, bold: isBold}">
  text
</div>

Örnek

Bir özellik, sınıfları ve durumlarını içeren tam bir nesne olabilir:

app/app.component.tsexport class AppComponent {
  public styles = {
    blue: false,
    bold: true,
  }
}

Bu nesneyi bloğumuza bağlayalım:

app/app.component.html<div [ngClass]="styles">
  text
</div>

Örnek

Nesnemiz için değerler, bileşen sınıfının diğer özelliklerinden alınabilir:

app/app.component.tsexport class AppComponent {
  public isBlue: boolean = false;
  public isBold: boolean = true;

  public styles = {
    blue: this.isBlue,
    bold: this.isBold,
  }
}

Bu nesneyi bloğumuza bağlayalım:

app/app.component.html<div [ngClass]="styles">
  text
</div>

Pratik Görevler