CSS siniflarinin Angular-da topda baglanmasi

ngClass direktivi vasitəsilə teqdə dərhal bir dəst CSS sinifini açmaq və bağlamaq olar. Direktiv dəyər kimi açarı siniflər, dəyəri isə boolean dəyərlər olan bir obyekt qəbul edir. Sinif üçün dəyər true təyin edildikdə aktiv olacaq, false təyin edildikdə isə deaktiv olacaq.

Gəlin praktikada baxaq. Tutaq ki, bizdə aşağıdakı siniflər var:

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

.bold {
  font-weight: bold;
}

Gəlin blok üçün bu sinifləri necə aktiv və deaktiv edəcəyimizə nümunələrlə baxaq.

Nümunə

Gəlin bir sinifi aktiv edək, digərini isə deaktiv edək:

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

Nümunə

Tutaq ki, siniflərin vəziyyətləri sinifin xassələrində saxlanılır:

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

Sinifin görünmə əmsalını xassələrimizin dəyərlərindən asılı olaraq bağlayaq:

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

Nümunə

Xassədə siniflər və vəziyyətlər olan tam bir obyekt ola bilər:

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

Gəlin bu obyekti blokumuzla bağlayaq:

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

Nümunə

Obyektimiz üçün dəyərləri sinifin digər xassələrindən almaq olar:

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

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

Gəlin bu obyekti blokumuzla bağlayaq:

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

Praktiki tapşırıqlar