Dinamično spreminjanje stilov v Angular

Z direktivama ngClass in ngStyle lahko povežemo izraze z elementi, zaradi česar se bodo naši stili spreminjali dinamično.

Naredimo tako, da se bo besedilo skrivalo ali prikazovalo z lastnostjo active razreda komponente:

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

Za to napišimo funkcijo toggle, ki bo izmenično vklopila ali izklopila to lastnost:

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

V CSS datoteki komponente nastavimo naslednji stil razredu:

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

V predlogi komponente naredimo div in dodajmo mu CSS razred hidden, ki se bo vklopil ali izklopil glede na lastnost active iz razreda komponente:

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

Naredimo tudi gumb, ob kliku na katerega se bo poklicala metoda toggle, ki bo prikazala ali skrila našo komponento:

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