Angular-да стильдерді динамикалық өзгерту

ngClass және ngStyle директивалары арқылы элементтерге өрнектерді байлауға болады, бұл біздің стильдеріміздің динамикалық түрде өзгеруіне мүмкіндік береді.

Мәтн компоненттің active сипаты арқылы жасырылатын немесе көрсетілетін етейік:

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

Ол үшін toggle функциясын жазамыз, ол бұл сипатты кезекпе-кезек қосады немесе өшіреді:

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

Компоненттің CSS файлында келесі стильді класқа тағайындаймыз:

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

Компоненттің шаблонында див жасаймыз және оған CSS класы hidden қосамыз, ол компонент класының active сипатына байланысты қосылады немесе өшеді:

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

Сондай-ақ батырма жасаймыз, оны басқанда toggle әдісі шақырылып, біздің компонентті көрсетеді немесе жасырады:

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