Дынамічнае змяненне стыляў у 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;
}

У тэмплейце кампанента зробім дыв, і дадамо яму CSS клас hidden, які будзе ўключацца альбо выключацца ў залежнасці ад уласцівасці active з класа кампанента:

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

Зробім таксама кнопку, па націску на якую будзе выклікацца метад toggle, паказваючы альбо схаваючы наш кампанент:

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