[Angular 5] Appliquer une animation au sein d'une boucle
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:
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:
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:
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:
<div class="produit" *ngFor="let p of produit,let i = index">
