Discussion :

[keokaz]

bonsoir,

dans un boucle je montre une image, et je mets à disposition d'un bouton qui va permettre d'afficher
la composition de cette image, voici le script:

Code HTML :

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

1
2
3
4
5
6
<div class="produit" *ngFor="let p of produit,let i = index">
  <div class="tactile" (click)="basculeShowComposition()">tactile</div>
  <div class="composition" [@tactilComposition]="showComposition" >{{p.composition}}</div>
  <img [src]="p.img" (mouseover)=" fctMouseOver($event,this)" (mouseout)="fctMouseOut($event)" data-over="">
 
</div>

la div où il y a "tactile" c'est le bouton qui va montrer un texte caché
la div où il y a "composition" est le texte caché

voici mon décorateur qui possède un trigger qui va en fonction du clique cacher ou montrer la composition

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
@Component({
  selector: 'app-produit',
  templateUrl: './produit.component.html',
  styleUrls: ['./produit.component.css'],
  encapsulation: ViewEncapsulation.None,
  animations:[
    trigger('tactilComposition',[
      state('show',style({
        opacity:1
      })),
      state('hide',style({
        opacity:0
      })),
    ])
  ]
})

voici la classe de ce composant

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export class ProduitComponent implements OnInit {
 
  @Input() produit;
 
  montreComposition = false;
 
  get showComposition(){
    return this.montreComposition ? 'show':'hide';
  }
 
  basculeShowComposition(){
    console.log("montre ingredient");
    this.montreComposition = !this.montreComposition;
  }

a chaque clique sur "tactile" j'appelle la méthode basculeShowComposition() qui caché ou montre la composition.

Pour le moment mon script fonctionne pour toute les compositions(puisqu'on est dans une boucle), comment faire pour qu'on puisse demander uniquement le tactile courant et pas tout caché ou tout montrer ?

doit-je m'aider de l'index pour arrive à mes fins ?

si vous avez une suggestion, merci d'avance pour la réponse

Code HTML :

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

<div class="produit" *ngFor="let p of produit,let i = index">

[keokaz]

j'ai trouvé une solution, mais je ne peux profiter du trigger ...
envoyer l'index au component et faire un ngIF

Code HTML :

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

1
2
3
4
5
6
7
8
9
<div class="produit" *ngFor="let p of produit,let i = index">
  <div class="tactile" (click)="basculeShowComposition(i)">tactile</div>
  <div *ngIf="idCourantClickIngredient==i" [ngStyle]="couleurStyle" class="composition" [@tactilComposition]="showComposition" >{{p.composition}}</div>
  <img [src]="p.img" (mouseover)=" fctMouseOver($event,this)" (mouseout)="fctMouseOut($event)" data-over="">
  <div class="infoProduit">
    <p>{{p.nom}}</p>
    <p> {{p.prix}} Euro</p>
  </div>
</div>