Discussion :

[olivier252]

Hello, me revoilà,

j'ai un menu material dans lequel je souhaite avoir le style suivant sur chaque item :
- quand item actif : le button est de colueur primary et l'icon n'a pas de couleur
- quand item inactif c'est l'inverse le button n'a pas de couleur mais l'icon est de couleur primary

mon code ne fonctionne pas dans le sens où il ne se passe rien au niveau du background-color lorsque je suis sur l'item actif. je pense que la propriété background-color ne passe pas dans le template

le voici :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div *ngFor="let itemFooterMenu of itemsFooterMenu; let indexItem = index">
        <a routerLink="{{ itemFooterMenu.utilRoute }}" routerLinkActive #rla="routerLinkActive">
            <button mat-button [ngStyle]="{'background-color': rla.isActive ? 'primary' : ''}">
                <mat-icon [ngStyle]="{'color': rla.isActive ? '' : 'primary'}">{{ itemFooterMenu.matIcon }}</mat-icon>
            </button>
        </a>
    </div>

merci

[krakatoa]

au lieu de background-color
mettre background
ça donne quoi ?

[olivier252]

Hello Krakatoa,

Négatif, ça bouge pas...
Modif : si ça marche en fait, si je metsune couleur de type "yello" "blue"... c'est primary le soucis

[krakatoa]

primary ce n'est pas une classe ?
donc serait ce ngClass qu'il faut utiliser ?

[olivier252]

je teste, merci

[olivier252]

non, je ne m'en sors pas avec ngClass.. bon à suivre