Динамичка измена стилова у 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>