Stiilide dünaamiline muutmine Angularis

Direktiivide ngClass ja ngStyle abil saab elementidele seostada avaldisi, tänu millele meie stiilid muutuvad dünaamiliselt.

Teeme nii, et tekst peidetaks või kuvataks komponendi klassi omaduse active abil:

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

Selleks kirjutame funktsiooni toggle, mis vaheldumisi lülitab selle omaduse sisse või välja:

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

Komponendi CSS-failis määrame järgmise stiili klassile:

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

Komponendi mallis teeme div-i ja lisame sellele CSS-klassi hidden, mis lülitub sisse või välja sõltuvalt komponendi klassi omadusest active:

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

Teeme ka nupu, mille vajutamisel kutsutakse välja meetod toggle, kuvades või peites meie komponendi:

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