Klasse zu einem Element in Angular hinzufügen

1. Klassen ohne Angular 4 hinzufügen
2. Fügen Sie einem Element eine Klasse hinzu, indem Sie die Eigenschaft ClassName in Angular 4 verwenden
3. Fügen Sie einem Element eine Klasse hinzu, indem Sie die Direktive NgClass in Angular 4 verwenden

Angular 4 ist ein Framework zum Erstellen von Webanwendungen. Es basiert auf TypeScript und verfügt über viele Funktionen, die es leistungsfähiger und flexibler als Angular 2 machen.

Eine der Funktionen, die Angular 4 leistungsfähiger machen, ist das Konzept, einem Element Klassen hinzuzufügen.

Der einfachste Weg, eine Klasse zu einem Element in Angular 4 hinzuzufügen, ist die Verwendung der HTML-Attributselektorsyntax mit der Direktive NgClass.

Diese Syntax kann für jedes HTML-Tag verwendet werden und ermöglicht Ihnen, mehrere Klassen gleichzeitig anzuwenden, die dann nach Bedarf von anderen Direktiven oder Stylesheet-Regeln angewendet werden können.

Dieser Artikel behandelt ausführlich das Hinzufügen einer Klasse zu einem Element in Angular 4.

Bevor wir das tun, untersuchen wir, wie Klassen mit herkömmlichem JavaScript im Vergleich zu Angular zugewiesen werden.

Klassen ohne Angular 4 hinzufügen

Die beliebte JavaScript-Bibliothek Angular bietet dazu mit der Direktive NgClass eine Möglichkeit. Mit dieser Direktive können Sie Klassen einfach und dynamisch zu einem Element hinzufügen und daraus entfernen.

Wenn Sie Angular jedoch nicht verwenden, gibt es einige andere Möglichkeiten, JavaScript zu verwenden, um diese Aufgabe zu erfüllen.

Ein jQuery-Plugin namens addClass ermöglicht es Ihnen, jedem Element einfach eine Klasse hinzuzufügen, solange es mit jQuery initialisiert wurde. Sie können auch die Methode .setAttribute() in JavaScript verwenden und die Eigenschaft className auf dem zu manipulierenden DOM-Knoten setzen.

Fügen Sie einem Element eine Klasse hinzu, indem Sie die Eigenschaft ClassName in Angular 4 verwenden

Um direkt an die Eigenschaft className in Angular 4 zu binden, verwenden wir die Eigenschaft ClassName. Es fügt jedem Element Klassen hinzu, auf die mit Klammern nach dem Selektor oder mit der Punktsyntax ClassName zugegriffen wird.

<div
    [className]="isActive ? 'active' : 'inactive'">
</div>

Wenn isActive true zurückgibt, wird die Klasse active hinzugefügt; ansonsten bleibt inaktiv gleich.

Fügen Sie einem Element eine Klasse hinzu, indem Sie die Direktive NgClass in Angular 4 verwenden

Es gibt viele Anwendungsfälle für die Direktive NgClass. Eine der häufigsten ist das Hinzufügen einer Klasse zu einem Element, wenn ein Benutzer darauf klickt.

Die NgClass-Direktive ermöglicht es Ihnen, einem Element basierend auf bestimmten Bedingungen Klassen hinzuzufügen. Wenn ein Benutzer beispielsweise auf eine Komponente klickt, können Sie diesem Element die aktive Klasse hinzufügen.

Die NgClass-Direktive ist hilfreich, weil sie es Ihnen ermöglicht, Klassen dynamisch zu Elementen in Ihrer Angular-Anwendung hinzuzufügen und zu entfernen. Darüber hinaus ist die Direktive selbst sehr anpassungsfähig und erledigt verschiedene Dinge basierend auf der Eingabe.

Angenommen, wir möchten eine statische Klasse mit NgClass zuweisen. Lassen Sie uns seine Syntax besprechen.

<div [ngClass]="'Class-Name'">/div>

NgClass kann auch mehrere statische Klassennamen gleichzeitig vergeben.

<div [ngClass]="['Class-Name', 'other-class']">/div>

Vollständiges Beispiel zum Hinzufügen von Klassen zu einem Element in Angular 4

HTML Quelltext:

<p [ngClass]="something === 'first' ? 'blue red-border' : 'blue'">
Add some text here
</p>
<p [ngClass]="something === 'first' ? 'blue red-border' : 'blue'">
Add some text here
</p>

CSS-Code:

p {
    font-family: Lato;
}
.blue {
    background-color: blue;
}
.red-border {
    border: 2px solid red;
}
*{
    color: white;
}

TypeScript-Code:

import { Component, ViewChild, OnInit, Renderer2, ElementRef, } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    name = 'Angular 4';
    something = 'first';
    constructor(private renderer: Renderer2) {}
}

Klicken Sie hier, um die Live-Demonstration der oben genannten Beispiele zu sehen.