Bedingte Klassen mit ngClass in Angular hinzufügen

Wir werden vorstellen, wie Sie bedingte Klassen hinzufügen oder eine if-else-Bedingung verwenden, um dynamische Klassen mit ngClass in unseren Angular-Anwendungen anzuzeigen.

Bedingte Klassen mit ngClass in Angular hinzufügen

Klassen sind der zentrale Bestandteil beim Entwerfen und Erstellen der Benutzeroberfläche unserer Anwendungen. Wir schreiben Designs basierend auf den Klassen, die verschiedenen Teilen unserer Anwendungen zugewiesen sind.

Manchmal müssen wir dynamische Klassen hinzufügen oder Klassen basierend auf Bedingungen ändern.

In diesem Tutorial werden verschiedene Möglichkeiten besprochen, um eine if-else-Anweisung in ngClass in Angular zu erreichen.

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

Beginnen wir mit einem einfachen Beispiel, in dem wir versuchen, eine Klasse zu einem HTML-Element hinzuzufügen, wenn die Bedingungsnachricht wie unten in app.component.ts gesetzt ist.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    message = 'warning';
}

Fügen wir nun ein HTML-Element mit ngClass mit der Bedingung hinzu, indem wir die Variable message in app.component.html verwenden.

# angular
<div [ngClass]="{'warning': message}">
Hello this is a warning message
</div>

Dann fügen wir CSS-Code zu der Klasse hinzu, die wir im div hinzufügen, basierend auf der folgenden Bedingung.

# angular
.warning {
    font-family: Lato;
    background: red;
    color: white;
    padding: 10px;
}

Ausgabe:

Wie Sie dem Beispiel entnehmen können, ist es einfach, die if-Anweisung innerhalb von ngClass zu verwenden. Wir haben einfach eine Klasse basierend auf der Bedingung hinzugefügt.

Jetzt gehen wir ein Beispiel durch, in dem wir eine Klasse basierend auf der wahren Bedingung hinzufügen. Wenn die Bedingung falsch ist, werden wir verschiedene Klassen hinzufügen.

Also fügen wir zuerst eine Bedingung in app.component.html hinzu und fügen eine Schaltfläche mit einem Klickereignis hinzu, das die Bedingung ändert, wie unten gezeigt.

# angular
<div [ngClass]="Warnmessage ? 'warning' : 'info'">
    Hello this is a warning message
</div>
<button (click)=changeClass()>Click this</button>

Lassen Sie uns nun eine Variable Warnmessage und eine Funktion erstellen, die die Bedingung beim Klicken auf die Schaltfläche ändert. Unser Code in app.component.ts sieht wie im folgenden Snippet aus.

# angular
import { Component, VERSION } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
export class AppComponent {
    name = 'Angular ' + VERSION.major;
    Warnmessage = true;

    changeClass() {
        this.Warnmessage = false;
        console.log('Button Clicked');
    }
}

Lassen Sie uns diesen Code ausführen und prüfen, wie er funktioniert.

Ausgabe:

Wie Sie sehen können, haben wir die Anweisung if-else auch in ngClass verwendet, und sie funktioniert unter Bedingungen. Wenn Sie jedoch mehr als eine Klasse basierend auf einer einzigen Bedingung hinzufügen möchten, können Sie dies auch tun, indem Sie ein Leerzeichen hinzufügen und einen neuen Klassennamen dahinter schreiben.

# angular
<div [ngClass]="Warnmessage ? 'warning message-box' : 'info message-box'">
    Hello this is a warning message
</div>
<button (click)=changeClass()>Click this</button>

Wir können auch mehrere Klassen hinzufügen, indem wir nach dem ersten Klassennamen ein Leerzeichen einfügen und den zweiten Klassennamen schreiben. Wir können sogar dreifache Klassen hinzufügen oder so viele, wie wir wollen.