Angular-ում ոճերի դինամիկ փոփոխում

ngClass և ngStyle դիրեկտիվների միջոցով կարելի է արտահայտություններ կապել էլեմենտներին, ինչի շնորհիվ մեր ոճերը կփոխվեն դինամիկ կերպով:

Եկեք անենք այնպես, որ տեքստը թաքնվի կամ ցուցադրվի active հատկության միջոցով կոմպոնենտի կլասում.

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

Դրա համար գրենք toggle ֆունկցիան, որը հերթով կմիացնի կամ կանջատի այս հատկությունը.

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

Կոմպոնենտի CSS ֆայլում սահմանենք հետևյալ ոճը կլասին.

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

Կոմպոնենտի թեմպլեյտում ստեղծենք div, և ավելացնենք դրան CSS hidden կլաս, որ կմիանա կամ կանջատվի՝ կախված active հատկությունից կոմպոնենտի կլասում.

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

Ստեղծենք նաև կոճակ, որի սեղմումով կկանչվի toggle մեթոդը, ցուցադրելով կամ թաքցնելով մեր կոմպոնենտը.

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