Angular2 Animations: Toggle State Triggers on Every *ngFor Rather Than The One Clicked

Question

I am making some expandable panels using Angular2 and Material Design Lite. I have followed the tutorial on the Angular2 site, but when one panel is clicked, the expandable panel on every item is triggered.

This is my code:

animations: [
trigger('focusPanel', [
  state('inactive', style({
    backgroundColor: '#eee',
    height: '100px'

  })),
  state('active',   style({
    backgroundColor: '#cfd8dc',
    height: '200px'
  })),
  transition('inactive => active', animate('100ms ease-in')),
  transition('active => inactive', animate('100ms ease-out'))
])]


export class AppComponent implements OnInit {

issues: Issue[]; 
selectedIssue: Issue;

state: string = 'inactive';

toggleMove() {
    this.state = (this.state === 'inactive' ? 'active' : 'inactive');
}

And the HTML

    <div class="demo-card-wide mdl-card mdl-shadow--2dp" *ngFor = "let issue of testIssues">
      <div class="mdl-card__title mdl-card--border">
        <h2 class="mdl-card__title-text">{{issue}}</h2>
      </div>
        <div class="mdl-card__supporting-text" [@focusPanel]='state'>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Mauris sagittis pellentesque lacus eleifend lacinia...
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Mauris sagittis pellentesque lacus eleifend lacinia...
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            Mauris sagittis pellentesque lacus eleifend lacinia...
        </div>          
      <div class="mdl-card__menu">

          <!-- Click to Expand Panel -->
        <button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored" (click)="toggleMove()">
          <i class="material-icons">arrow_drop_down</i>
        </button>

I have tried changing the markup on the HTML to

<div class="mdl-card__supporting-text" [@focusPanel]='issue.state'>

And the toggle button to

(click)="issue.toggleMove()"

But then the animations stops working completely. Would appreciate any help in pointing out where I am going wrong.

micronyks · Accepted Answer · 2017-02-02T03:33:25.153

1

<div class="mdl-card__supporting-text" [@focusPanel]='issue.state'>

<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"
        (click)="toggleMove(issue.state)">       //<<===modified


toggleMove(newState) {
    newState = (newState === 'inactive' ? 'active' : 'inactive'); 
                                                 //<<<===modified
}

EDIT:

You are using an array but in order to perform this task, you need to work with array of objects(not a major change so relax).

**DEMO : https://plnkr.co/edit/SHalqpxLPYCjPxhixueI?p=preview

I changed following things and boom,

<h2 class="mdl-card__title-text">{{issue.month}}</h2>

<div class="mdl-card__supporting-text" [@focusPanel]="issue.state==(undefined || 'active')?'active':'inactive'">

<button (click)="toggleMove(issue)">

export class App {
    testIssues = [{month:"January"},{month:"Feb"}];
    toggleMove(obj) {
           obj.state = obj.state === 'active' ? 'inactive' : 'active'; 
    }
}

Now, You can make it more accurate !

edited Feb 02 '17 at 03:33

answered Feb 01 '17 at 10:02

micronyks

54,797
15
112
146

Thanks but it doesn't work - where is the state being assigned to newState? – Feb 01 '17 at 10:08
newState is a parameter being passed through function while clicking the button. You can set it for individual element while fetching data from the server. – micronyks Feb 01 '17 at 10:09
Can you reproduce it using plunkr? – micronyks Feb 01 '17 at 10:31
Plunkr available here https://plnkr.co/edit/Qa6bXuAHVAPXSSFoof8z?p=info – Feb 01 '17 at 10:55
If you can set the initial state to inactive I'll mark as correct – Feb 01 '17 at 16:25

Angular2 Animations: Toggle State Triggers on Every *ngFor Rather Than The One Clicked

1 Answers1