Dynamische Änderung von Stilen in Angular

Mit den Direktiven ngClass und ngStyle können Ausdrücke an Elemente gebunden werden, wodurch sich unsere Stile dynamisch ändern werden.

Lassen Sie uns den Text mit der Eigenschaft active der Komponentenklasse ein- oder ausblenden:

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

Schreiben wir dazu die Funktion toggle, die diese Eigenschaft abwechselnd ein- oder ausschaltet:

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

In der CSS-Datei der Komponente definieren wir den folgenden Stil für die Klasse:

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

Im Template der Komponente erstellen wir ein Div und fügen ihm die CSS-Klasse hidden hinzu, die abhängig von der Eigenschaft active aus der Klasse der Komponente ein- oder ausgeschaltet wird:

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

Erstellen wir auch einen Button, bei dessen Klick die Methode toggle aufgerufen wird, um unsere Komponente ein- oder auszublenden:

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