Dinamiškas stilių keitimas Angular

Naudojant direktyvas ngClass ir ngStyle galima susieti išraiškas su elementais, dėl ko mūsų stiliai keisis dinamiškai.

Padarykime, kad tekstas būtų paslėptas arba rodomas naudojant komponento klasės savybę active:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

Tam parašykime funkciją toggle, kuri pakaitomis įjungs arba išjungs šią savybę:

app/app.component.tsexport class AppComponent {
  active: boolean = true;
  
  toggle() {
    this.active = !this.active;
  }
}

Komponento CSS faile nustatykime tokį stilių klasei:

app/app.component.css.hidden {
  display: none;
}

Komponento šablone sukurkime div, ir pridėkime jam CSS klasę hidden, kuri būtų įjungiama arba išjungama priklausomai nuo savybės active iš komponento klasės:

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

Taip pat sukurkime mygtuką, kurį paspaudus būtų iškviečiamas metodas toggle, rodant arba slepiant mūsų komponentą:

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