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