Je crée un menu de barre latérale en utilisant un matériau angulaire. Je n'ai pas trouvé de moyen de changer la couleur du bouton en fonction de certaines propriétés du composant.
J'ai déjà lu la documentation: https://material.angular.io/components/button/overview
Et à propos des thèmes, il dit seulement:
Les boutons peuvent être colorée en fonction du thème actuel en utilisant la propriété color pour définir la couleur d'arrière-plan sur primaire, accentuation ou avertissement.
Voici mon code:
<button
*ngFor="let link of links; let i = index"
mat-raised-button
(click)="selectedIndex = i"
[color]="selectedIndex === i ? primary : warm"
[routerLink]="link.routerLink">
</button>
4 Réponses :
Vous devez entourer le nom du thème de couleur de guillemets pour le passer sous forme de chaîne:
[color]="selectedIndex === i ? 'primary' : 'warn'"
Voir this stackblitz pour une démo.
Essayez ceci, changez primaire en "principal" et avertissez en "avertir", devrait avoir l'effet que vous souhaitez.
Très possible, vous devrez passer des littéraux de chaîne à votre liaison de données https://stackblitz.com/ edit / angular-npzkiu? embed = 1 & file = app / button-overview-example.html [coul.
Cela peut résoudre votre problème, en utilisant des guillemets simples plutôt que sans:
[color] = "selectedIndex === i? 'primary': 'warn'"