Klasse hinzufügen in Angular

1. Statische oder dynamische Klasse in Angular hinzufügen
2. Verwendung der NgClass in Angular

Wir werden verschiedene Methoden wie className und ngClass vorstellen, um statische oder dynamische Klassen in Angular hinzuzufügen. Wir werden auch vorstellen, wie man Klassen in Angular umschaltet.

Statische oder dynamische Klasse in Angular hinzufügen

Klassen sind der Hauptbestandteil jeder Webanwendung. Wir gestalten und führen verschiedene Funktionen basierend auf ihrem Klassennamen aus.

Wie Single-Page-Application-Frameworks glänzt Angular, wenn es um die Datenbindung geht. DOM-Elemente werden automatisch aktualisiert, wenn es Änderungen im entsprechenden JavaScript-Objekt gibt.

Lassen Sie uns mit dem folgenden Befehl eine neue Anwendung erstellen.

# angular
ng new my-app

Nachdem wir unsere neue Anwendung in Angular erstellt haben, gehen wir mit diesem Befehl zu unserem Anwendungsverzeichnis.

# angular
cd my-app

Lassen Sie uns nun unsere App ausführen, um zu überprüfen, ob alle Abhängigkeiten korrekt installiert sind.

# angular
ng serve --open

Wir können unsere Klassennamen an jedes HTML-Element binden, so wie wir normalerweise einen Klassennamen in HTML hinzufügen. Der einzige Unterschied besteht darin, dass wir wie unten gezeigt className anstelle von class verwenden.

# angular
<div [className]="'my-class'"></div>

Der obige Code zeigt, dass es sich nur um eine statische Klasse handelt, die einem div-Element zugewiesen ist. Lassen Sie uns nun besprechen, wie wir dynamische Klassen mit className hinzufügen können.

Wie unten gezeigt, können wir Klassen basierend auf einer Bedingung ändern oder einem Element hinzufügen.

# angular
<div [className]="loggedIn ? 'logged-class' : 'my-class'"></div>

Wenn die Bedingung loggedIn true ist, wird die Klasse logged-class zugewiesen. Wenn die Bedingung false ist, wird die Klasse my-class zugewiesen.

Wir können auch einen Klassennamen zur Laufzeit erstellen, wie unten gezeigt.

# angular
<div [className]="'class' + myValue"></div>

Das obige Beispiel zeigt, dass wir einen String class und einen Wert myValue hinzufügen, der zur Laufzeit alles sein kann, und einen Klassennamen bilden.

Verwendung der NgClass in Angular

Die ngClass ist eine Direktive, die verwendet wird, um den Code schlanker aussehen zu lassen, weil es nur syntaktischer Zucker ist. Es ist bequem und kürzer zu bedienen.

Die ngClass ist sehr vielseitig. Lassen Sie uns also prüfen, wie wir ngClass verwenden können, wie unten gezeigt.

# angular
<div [ngClass]="'myclass'"></div>

Die ngClass hilft uns auch, mehr als einen Klassennamen hinzuzufügen, wie unten gezeigt.

# angular
<div [ngClass]="['my-class','second-class']"></div>

Wir können auch Bedingungen verwenden, um Klassennamen zuzuweisen und sie basierend auf Bedingungen umzuschalten, wie unten gezeigt.

# angular
<div
  [ngClass]="{
  'my-class': loggedIn
}"
></div>

Wie unten gezeigt, können wir auch mehrere Klassen basierend auf zwei verschiedenen Bedingungen zuweisen.

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': !loggedIn
}"
></div>

Wir können auch zwei verschiedene Bedingungen verwenden, wie unten gezeigt.

# angular
<div
  [ngClass]="{
  'my-class': loggedIn,
  'second-class': myValue
}"
></div>

Auf diese Weise können wir Klassen einfach anhand von Bedingungen mit ClassName und ngClass zuweisen. Wir haben auch gelernt, dynamische, statische oder mehrere Klassen mit Angular-Direktiven hinzuzufügen.