web-dev-qa-db-fra.com

Angular ajouter une classe dynamiquement

Est-il possible d’ajouter une classe à partir du fichier .ts à l’aide de solutions Angular

<div [class.extra-sparkle]="isDelightful == true">

Je veux faire ce qui précède, mais à partir du fichier .ts. Le moins de code le mieux.

<button class="general" (click)="ChangeScreen('Global')"       [class.selected]="CurrentPage == 'Global'">Global</button>
<button class="general" (click)="ChangeScreen('Maintenance')"  [class.selected]="CurrentPage == 'Maintenance'">Maintenance</button>
<button class="general" (click)="ChangeScreen('Settings')"     [class.selected]="CurrentPage == 'Settings'">Settings</button>
<button class="general" (click)="ChangeScreen('Profile')"      [class.selected]="CurrentPage == 'Profile'">Profile</button>
<button class="general" (click)="ChangeScreen('Transactions')" [class.selected]="CurrentPage == 'Transactions'">Transactions</button>

Je voudrais juste ajouter quelque chose comme ceci dans la fonction ChangeScreen:

ChangeScreen(page) {
    page.addClass = page;
}

Ensuite, je peux supprimer toutes ces lignes: [class.selected]="CurrentPage == '...'"

htmlcssangular
3
Paul Kruger

Pendant que la solution avec le moteur de rendu fonctionne, je vous propose de créer une structure de données pour vos boutons.

buttons: Array<{label: string}> = [
    {
      label: 'Global'
    },
    {
      label: 'Maintenance'
    },
    {
      label: 'Settings'
    },
    {
      label: 'Profile'
    },
    {
      label: 'Transactions'
    }
  ]

Ceci peut facilement être itéré en utilisant ngFor

<button 
  *ngFor="let button of buttons" 
  class="general" 
  (click)="ChangeScreen(button.label)" 
  [class.selected]="CurrentPage == button.label">
  {{ button.label }}
</button>

Et la seule chose dont votre méthode ChangeScreen aurait besoin, c’est… ce qu’elle fait déjà, régler la page actuelle!

Voir stackblitz pour un exemple de la façon dont cela se déroule.

1
Abdel

Utiliser Renderer

Voir ici: https://angular.io/api/core/Renderer

et ici: https://angular.io/api/core/Renderer#setElementClass

import { Renderer } from '@angular/core';

constructor(private render:Renderer) { }

ChangeScreen(event:any) {
 this.renderer.setElementClass(event.target,"selected",true);
}

En html:

<button class="general" (click)="ChangeScreen()">Global</button>

Ou Render2:

Voir ici: https://angular.io/api/core/Renderer2

et ici: https://angular.io/api/core/Renderer2#addClass

import { Renderer2 } from '@angular/core';

constructor(private render:Renderer2) { }

ChangeScreen(event:any) {
 this.renderer.addClass(event.target,"selected");
}

En html:

<button class="general" (click)="ChangeScreen()">Global</button>
1
לבני מלכה