Implementieren Sie die ngStyle-Direktive in Angular

1. die Direktive ngStyle in Angular
2. Schritte zur Implementierung der ngStyle-Direktive in Angular

Mit der Angular-Stilrichtlinie können Sie Stile auf Ihre HTML-Elemente anwenden. Die ngStyle-Direktive ist eine Variation der style-Direktive in Angular.

Dieser Artikel behandelt die Verwendung der ngStyle-Direktive in Angular.

die Direktive ngStyle in Angular

Die Direktive ngStyle wendet mithilfe von CSS-Selektoren Stile auf ein HTML-Element an. Diese Direktive arbeitet mit der Templating-Engine von Angular, die Ihnen mehr Kontrolle darüber gibt, wie ein HTML-Dokument gerendert werden soll.

Die Direktive ngStyle ist eine der beliebtesten Direktiven in Angular. Es kann für verschiedene Zwecke verwendet werden, z. B. zum Anwenden benutzerdefinierter CSS-Klassen und zum Gestalten von Formularelementen.

Syntax:

<element [ngStyle]="{'styleNames': styleExp}">...</element>

Der Wert für die Attributdirektive ngStyle kann ein beliebiger bedingter binärer oder ternärer Ausdruck sein. Darüber hinaus verarbeitet es jeden im Controller definierten Methodenaufruf, den der Controller nach Bedarf steuern kann.

Wir können auch die Direktive ngStyle verwenden, um die Ansicht und das CSS-Styling basierend auf dem Modellwert zu verwalten, sodass ngStyle ausgeführt und das CSS-Styling aktualisiert wird, wenn sich der Modellwert ändert.

Schritte zur Implementierung der ngStyle-Direktive in Angular

Die Direktive ngStyle ist unkompliziert und kann auf jedes Element im DOM angewendet werden. Sie müssen einige Schritte befolgen, bevor Sie es auf Ihrer Website verwenden.

Lassen Sie uns ein Beispiel mit den oben genannten Schritten besprechen.

TypeScript-Code:

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
    canSave = true;
}

HTML Quelltext:

<h2>Example of ng-style in Angular</h2>
<button
    [ngStyle] = "{
        'backgroundColor' : canSave ? 'pink' : 'blue',
        'color' : canSave ? 'red' : 'yellow',
        'margin-left': '200px',
        'padding': '30px',
        'margin-top': '200px'
    }"
>A simple button</button>

Im Beispiel haben wir einen einfachen Button erstellt und mit Hilfe der ngStyle-Direktive Margin, Padding, Font und Hintergrundfarbe angegeben.

Klicken Sie hier, um die Demonstration des obigen Codes zu überprüfen.