angular 5/6 animation issue with ngFor

Question

using ngFor I am creating 4 card in my application. I want to use angular animation like If i am clicking on first card other three cards should fadeOut and first card should zoomOut. How can I achieve it

html

<div class="row card-grid">
    <div class="col-6 card-{{card.name | lowercase}}" *ngFor="let card of cards">
      <div class="card text-uppercase" [routerLink]="[card.url]">
        <div class="card-body">
          <fa-icon class="d-block h1 mb-4 text-primary" icon="{{card.icon}}" [rotate]="card.name === 'Call' ? 90 : ''"></fa-icon>
          <h5 class="text-muted m-0">{{card.name}}</h5>
        </div>
      </div>
    </div>
  </div>

TS

trigger(cardAnima, [
 transition(':leave', [
   group([
     query('.card-present', [useAnimation(zoomOut)], {
      optional: true
    }),
    query(
      '.card-call, .card-schedule, .card-lights',
      [useAnimation(fadeOut)],
     {
      optional: true
     }
    )
   ])
  ])
]);

its working only for first card click.

https://stackoverflow.com/help/mcve – Roberto Zvjerković Jul 19 '18 at 07:53 — Roberto Zvjerković, Jul 19 '18 at 07:53

score 0 · Answer 1 · answered Jul 19 '18 at 09:10

you can create variable "selectedItem" to store the clicked-item. so if your user clicks on an item, you must set "selectedItem=clicked-item;" then you can add a *ngIf to the card where you can set a css-class or a property depend on whether "selectedItem=this" is true or false.

angular 5/6 animation issue with ngFor

1 Answers1