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