CODEWITHSUNDEEP
angularanimation
Mackelito
Mackelito

Reputation: 4421

Angular animation with *ngFor

I have I list of items and I want to trigger state for one item at a time. http://plnkr.co/edit/WGLbs2gl7zSxGymOSm0y?p=preview

When clicking I want only clicked item to get the state and if state is 'closed' it should not show.

import { Http } from '@angular/http';
import {
  animate,
  Component,
  keyframes,
  state,
  style,
  transition,
  trigger,
} from '@angular/core';

@Component({
  selector: 'card-overview-example',
  templateUrl: 'card-overview-example.html',
  animations: [
    trigger('state', [
      state('open',
        style({
          opacity: 1
        })),
      transition('* => open', [
        animate(200, keyframes([
          style({
            opacity: 1
          }),
        ])),
      ]),
      state('closed',
        style({
          opacity: 0
        })
      ),
    ])
  ]
})
export class CardOverviewExample {
  items = [];
  state;
  constructor(private http: Http) {
   this.getData().subscribe(items => this.items = items.results);
  }
  getData() {
    return this.http.get(`https://swapi.co/api/people/?format=json`)
    .map((res:Response) => res.json());
  }
  showDetails(item) {
    // this.state = (this.state === 'open' ? 'closed' : 'open');
    this.state = (this.state === 'open' ? 'closed' : 'open');
  }
}
<md-card *ngFor="let item of items">
  <md-card-title (click)="showDetails()">{{item.name}}</md-card-title>
  <md-card-content [@state]="closed">state = {{state}}
    <p>{{item.hair_color}}</p>
    <p>{{item.skin_color}}</p>
    <p>{{item.eye_color}}</p>
  </md-card-content>
</md-card>

Upvotes: 1

Views: 561

Answers (1)

Mackelito
Mackelito

Reputation: 4421

More or less figured it out by passing the item and having state on items... http://plnkr.co/edit/QhArVlfFGIsXjx5QSLcX?p=preview

(click)="showDetails(item)"

Hope it helps someone else :)

Upvotes: 1

Related Questions