0

Say I have the following in my components html

<div *ngFor='let box of boxes' [@fade_out]='off'>
 <h1> Author: {{ box.author }} </h1>
 <button (click)='delete(box)'>Delete box</button>
</div>

and in the controller: 

delete(box: any){
//opens an mddialog that confirms deletion
dialog.open(...).afterClosed().subscribe( response => {
 //do something
}

I want to be able to dynamically update the [@fade_out] state for (and only for) the particular div that the user clicked on AFTER receiving a response from the dialog box.

If I bind [@fade_out] to a boolean in the controller, all of the other boxes will trigger the same animation and therefore all fade out.

If I bind [@fade_out] to a function, I'm lost as to how to trigger that specific function for that specific div after I get the response.

Can anyone suggest a way for me to make this work?

br.julien
  • 3,420
  • 2
  • 23
  • 44
scriptain
  • 1

1 Answers1

0

So the answer was right there and I failed to see it. As per the docs, I simply linked the animation to a property of the object.

<div *ngFor='let box of boxes' [@fade_out]='box.state'>
 <h1> Author: {{ box.author }} </h1>
 <button (click)='delete(box)'>Delete box</button>
</div>

I then pass the data to the dialog and then in the subscription to afterClosed() I can update the specific box state

dialog.open(...).afterClosed().subscribe( response => {
 box.state = response
}
scriptain
  • 1