Angular-da stilleri dinamiki üýtgetmek

ngClass we ngStyle direktiwalary ýardamynda elementlere ifadeleri birikdirip bileris, bu bolsa bizleriň stillerimiziň dynamiki üýtgemegine getirer.

Geliň, komponentiň klasynyň active hasiyetini ulanmak bilen tekst görkezilýän ýa-da gizlenýän etmeli:

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

Bun üçin toggle funksiýasyny ýazalyň, ýöne bu hasiýeti açjak ýa-da ýapjak:

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

Komponentiň CSS faýlynda aşakdaky stili klas üçin kesgitleýäris:

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

Komponentiň şablonunda bir div döredeliň we oňa CSS klasyny hidden goşalyň, bu klas komponentiň klasynyň active hasiýetine baglylykda goşular ýa-da aýrylar:

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

Şeýle hem, basylanda toggle metodu çagyrylar we komponentimizi görkezer ýa-da gizler düwmäni ýasalyň:

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