სტილების დინამიური ცვლილება 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;
}

კომპონენტის ტემფლეიტში გავაკეთოთ div, და მივუმატოთ მას CSS კლასი hidden, რომელიც ჩაირთვება ან გაითიშება active თვისებიდან გამომდინარე კომპონენტის კლასიდან:

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

გავაკეთოთ ასევე ღილაკი, whose დაწკაპუნებით გამოიძახება მეთოდი toggle, რომელიც გამოაჩენს ან დაამალავს ჩვენს კომპონენტს:

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