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

[krakatoa]

surement qu'il y a déjà une classe et donc il a la priorité.

le plus simple :

Code html :

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

1
2
3
4
5
6
            <button *ngIf="rla.isActive" mat-button class="primary">
                <mat-icon style="color: primary">{{ itemFooterMenu.matIcon }}</mat-icon>
            </button>
            <button *ngIf="!rla.isActive" mat-button class="??????????">
                <mat-icon style="color: ????????????">{{ itemFooterMenu.matIcon }}</mat-icon>
            </button>

la bonne pratique est la directive, mais ça demande des connaissances avancés :

Code html :

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

1
2
3
            <button appActive="rla.isActive" mat-button >
                <mat-icon>{{ itemFooterMenu.matIcon }}</mat-icon>
            </button>

[olivier252]

ah merci beaucoup, c'est vrai que je pourrais essayer la directive, je vais tenter du coup.

[olivier252]

Du coup, juste un petit indice, il faut que je place le code html dans la directive et après j'appelle le appDirective ds la balise ou j'en ai besoin ?

[krakatoa]

comme cela m'a intrigué, j'ai regardé.
en fait faut voir la doc angular material
alors t'embete pas avec les directives c'est déjà prévu par angular material


en plus ce n'est pas mat-button mais mat-raised-button

teste ça :

Code html :

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

1
2
3
  <button mat-raised-button [color]="rla.isActive ? 'primary' : 'accent'">
    <mat-icon [color]="rla.isActive ? 'primary' : 'warn'">info</mat-icon> toto
  </button>

et tu trouveras bonheur !

[olivier252]

Ah merci, mais du coup, il me faudrait un [background] au niveau du bouton ! Mais bon tu m'as assez aidé sur ce coup là !

edit : Suis trop nul, ça marche nickel.

Meeeeeeeeeeeeeeeeeeeeeeeeeerciiiiiiiiiii !!!

[krakatoa]

'primary' : 'accent' 'warn"
sont des background predefinie material


pour une couleur perso :

Code html :

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

1
2
3
4
5
6
  <button
    mat-raised-button
    [style.background-color]="isActive ? 'red' : 'blue'"
  >
    <mat-icon [color]="isActive ? 'primary' : 'warn'">info</mat-icon> toto
  </button>

[olivier252]

Le truc c'est que effectivement je m'étais acharné avec le mat-button et non le raised ! Bien joué comme toujours. tu donnes pas des cours particuliers par hasard ??

[krakatoa]

et non, mais si tu as des questions
tu peux les poser ici !

[olivier252]

oui, je ne m'en prive pas, d'ailleurs est-ce que tu pourrais me montrer l'endroit de la doc où il est dit que le raised-button supporte la propriété [color] ? Je n'ai pas trouvé...Après je te laisse tranquille...

[krakatoa]

https://material.angular.io/components/button/overview


tu peux voir que le 1ere ligne est des boutons basic
et la 2eme ligne des raised

en haut à droite tu peux aller voir le code correspondant : clique sur < >

[olivier252]

Ok, ça j'ai vu, mais comment as tu fait pour trouver qaue c'était le raised qui fonctionnait et pas les autres ? Tu as découvert en testant (mon boss va me demander en fait) ?

[krakatoa]

grâce à mes yeux de lynx

j'ai constaté que les basic n'avait pas de background contrairement aux raised
j'ai testé et hop confirmation !

[olivier252]

C'est ce qu'on appelle le Métier avec un grand M !

[krakatoa]

et oui mec, le métier , l'expérience...

toi aussi un jour, tes yeux seront aguerris et tu repérera de loin le moindre Bugue tel un faucon !