Kubadilisha Mitindo Kwa Nguvu katika Angular

Kwa kutumia maagizo ngClass na ngStyle unaweza kuunganisha misemo kwa vipengele, ambayo huifanya mitindo yetu ibadilike kwa nguvu.

Wacha tufanye ili maandishi yafichike au yaonekane kwa kutumia sifa active ya darasa la komponenti:

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

Kwa hili tuandike kitendo toggle, ambacho kwa mbadala kitawasha au kuzima sifa hii:

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

Katika faili ya CSS ya komponenti, weka mtindo ufuatao kwa darasa:

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

Katika kiolezo cha komponenti, tufanye div, na tuongeze darasa la CSS hidden, ambalo litawashwa au kuzimwa kulingana na sifa active kutoka kwa darasa la komponenti:

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

Tufanye pia kifungo, ubonyeze ambao kitaitaja mbinu toggle, kuonyesha au kuficha komponenti yetu:

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