Angular: How to keep final animation state when us

Question

See this plunker: https://plnkr.co/edit/mqwJP75zjTUmsqsqRxfH?p=preview

This is with Angular v5.1.3.

There are buttons to toggle between the up+fade-in (opacity 1) and down+fade-out (opacity 0) states. I'm confused why the down state reverts back to the original values after the animation ends, and what I should be doing to cause the animation to hold its final values.

Note that I'm explicitly not using state() because of https://github.com/angular/angular/issues/18775 (it's not allowed in combination with query()). Also, I recognize that I might be able to accomplish this specific example without using query(), but I'm more interested in solving this in the general case than I am in making the specific plunker example work.

Answer 1

For example, for define toggle state

You must add @toggle.start and @toggle.done in your element

<div [@toggle]="show" 
     (@toggle.start)="animationStarted($event)"
     (@toggle.done)="animationDone($event)">

    <!-- Your HTML code here -->

</div>

And define the methods in the related class

export class Toggle {
  animationStarted($event) {
    console.log('Start');
  }

  animationDone($event) {
    console.log('End');
  }
}