Angular-da stillarni dinamik o'zgartirish

ngClass va ngStyle direktivalari yordamida iboralarni elementlarga bog'lash mumkin, bu esa bizning stillarimizni dinamik o'zgartiradi.

Keling, matn komponentning active xususiyati yordamida yashiriladigan yoki ko'rsatiladigan qilaylik:

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

Buning uchun toggle funksiyasini yozamiz, bu funksiya navbatma-navbat ushbu xususiyatni yoqiq yoki o'chiradi:

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

Komponentning CSS faylida quyidagi uslubni klassga belgilaymiz:

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

Komponentning andozasida div yaratamiz va unga CSS klass hidden ni qo'shamiz, bu klass komponent klassidagi active xususiyatiga qarab yoqiladi yoki o'chadi:

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

Shuningdek, tugma yaratamiz, unga bosilganda toggle metodi chaqiriladi va komponentimizni ko'rsatadi yoki yashiradi:

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