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;
}

Компоненттин шаблонунда див жасап, ага компоненттин класстын active касиетине жараша күйгүзүлүп же өчүрүлүп турган CSS классты hidden кошобуз:

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

Ошондой эле баскыч жасайбыз, ага басканда toggle методу чакырылып, биздин компонент көрүнүп же жашырылат:

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