1
votes

Changer la couleur du bouton avec l'icône du tapis en un clic

J'ai donc besoin de changer la couleur d'un bouton avec une icône matérielle lorsque je clique dessus. J'ai essayé quelque chose comme ceci:

HTML:

activeSkill(event){
    event.target.setAttribute('color', 'accent');
}

TS:

  <button (click)="activeSkill($event)" color="primary" mat-mini-fab>
    <mat-icon aria-label="" name='skill1'>euro_symbol</mat-icon>
  </button>

Mais cela ne fonctionne pas. Quelle est la manière la plus simple de procéder? Et en fait, si possible, comment pourrais-je ne pas utiliser les couleurs primaires et d'accentuation par défaut, mais un ensemble de couleurs.

angular html angular-material sass

1 commentaires

Je n'ai pas écrit correctement mon doute et vous avez raison, car la question ci-dessus est une très bonne solution.

3 Réponses :

2
votes

Vous pouvez utiliser la variable et utiliser qui peut attribuer la valeur de couleur bouton

ci-dessous est un exemple

en html,

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

@Component({
  selector: 'button-overview-example',
  templateUrl: 'button-overview-example.html',
  styleUrls: ['button-overview-example.css'],
})
export class ButtonOverviewExample {

  selectedColor: string = 'primary';

}

en .ts

<button (click)="selectedColor = 'accent'" [color]="selectedColor" mat-mini-fab>
    <mat-icon aria-label="" name='skill1'>euro_symbol</mat-icon>
 </button>

0 commentaires

0
votes

Vous pouvez passer la variable locale comme ref. et définissez le style en conséquence comme ceci -

activeSkill(event, ele) {
    console.log(event, ele);
    ele['_elementRef']['nativeElement']['className'] = 'mat-raised-button mat-accent';
  }

<button #btn (click)="activeSkill($event, btn)" md-raised-button color="primary">Primary</button>

Exemple de travail

2 commentaires

Cela ne fonctionnait pas correctement lorsque vous aviez une icône de tapis à l'intérieur, l'icône de tapis qui était un bouton circulaire, s'est transformée en bouton plat et a perdu ses propriétés. Mais merci pour la réponse.

Oui, il y a quelques meilleures réponses ci-dessus en dehors de cela. Juste posté s'il n'y a pas moyen d'essayer ceci!

2
votes

Vous pouvez également effectuer les opérations suivantes. Ajoutez une référence #button à la balise button.

import { Component, ViewChild, ElementRef } from '@angular/core';

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

  activeSkill() {
    (<any>this.button).color = 'accent';
  }
}

Dans votre composant, utilisez le décorateur ViewChild

<button (click)="activeSkill()" color="primary" mat-mini-fab #button>
  <mat-icon aria-label="" name='skill1'>add</mat-icon>
</button>

Consultez ce StackBlitz .

0 commentaires