Implémenter la directive ngStyle dans Angular

1. la directive ngStyle en Angular
2. Étapes pour implémenter la directive ngStyle dans Angular

La directive de style Angular vous permet d’appliquer des styles à vos éléments HTML. La directive ngStyle est une variante de la directive style dans Angular.

Cet article traitera de l’utilisation de la directive ngStyle dans Angular.

la directive ngStyle en Angular

La directive ngStyle applique des styles à un élément HTML à l’aide de sélecteurs CSS. Cette directive fonctionne avec le moteur de modélisation Angular qui vous permet d’avoir plus de contrôle sur la façon dont un document HTML doit être rendu.

La directive ngStyle est l’une des directives les plus populaires dans Angular. Il peut être utilisé à diverses fins, telles que l’application de classes CSS personnalisées et le style des éléments de formulaire.

Syntaxe:

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

La valeur de la directive d’attribut ngStyle peut être n’importe quelle expression binaire ou ternaire conditionnelle. De plus, il gère tout appel de méthode défini dans le contrôleur, que le contrôleur peut contrôler en fonction des besoins.

Nous pouvons également utiliser la directive ngStyle pour gérer le style View et CSS en fonction de la valeur du modèle afin que ngStyle soit exécuté et que le style CSS soit mis à jour lorsque la valeur du modèle change.

Étapes pour implémenter la directive ngStyle dans Angular

La directive ngStyle est simple et peut être appliquée à n’importe quel élément du DOM. Vous devez suivre quelques étapes avant de l’utiliser sur votre site Web.

Discutons d’un exemple en utilisant les étapes mentionnées ci-dessus.

Code TypeScript :

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

Code HTML:

<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>

Dans l’exemple, nous avons créé un bouton simple et donné la marge, le remplissage, la police et la couleur d’arrière-plan à l’aide de la directive ngStyle.

Cliquez ici pour vérifier la démonstration du code ci-dessus.