ngAfterViewChecked should be fired after the end of leave animation

[AbdulRahmanAlHamali]

I'm submitting a ... (check one with "x")

[x] bug report 

Current behavior
The behaviour is demonstrated in this plunker:
https://embed.plnkr.co/tQVOfAWdrO9x0X4fE8Jz/

If you click on node1 in this plunker, the node will expand and show nodes inside of it, the colors will be correctly alternating (grey - white), but then, if you click on the node again to collapse it, the color alternation will be ruined.

The reason for this is that ngAfterViewChecked is getting called before the animation is done, and is not getting called again after the animation is done and all elements are removed correctly. In other words, ngAfterViewChecked is getting called when the elements that are supposed to have been removed, are not removed yet, and they are, thus, messing up the count for the for loop that generates the colors of the rows.
To validate that the problem only happens when there is animation, you could remove the animation from the ul, and see how the coloring is done correctly.

Expected/desired behavior

ngAfterViewChecked is called after the animation is done and the elements have been removed, which will result in the colors being correct.

Reproduction of the problem
Here's the plunker again:
https://embed.plnkr.co/tQVOfAWdrO9x0X4fE8Jz/

What is the expected behavior?
To get a call for ngAfterViewChecked (or at least to some lifecycle hook), after the animation is done and the elements are fully removed.

What is the motivation / use case for changing the behavior?
Executing code after elements that are animated using the (* => void) transition have been fully removed.

Please tell us about your environment:

• Angular version: 2.0.0-rc.6
• Browser: Chrome (tried on more than one version)
• Language: all (not really related to the language)

[matsko]

So the premise of ngViewChecked is to be fired once dirty checking has excited for the associated view. Changing that behaviour to cater to animations would be wrong since animations are a side effect of change detection.

The solution for you here is to attach an animation listener to the element(s) being animated within the template.

<ul *ngIf="node1Expanded"
      [@treeViewAnimation]="'in'"
      (@treeViewAnimation.start)="beforeUpdateColors()"
      (@treeViewAnimation.done)="updateColors()">

Then setup these listeners to perform the stylistic changes to your component either before or after the animation has completed itself.

export class AppComponent {
  node1Expanded: boolean = false;

  ngAfterViewChecked() {
    this.updateColors();
  }

  beforeUpdateColors() {
    // some code in here if you want as well
  }

  updateColors() {
    let rows = document.getElementsByClassName('tree-node');

    for (let i = 0; i < rows.length; i++) {
      if (i % 2 === 0) {
        rows[i].style['background-color'] = 'LightGrey'
      } else {
        rows[i].style['background-color'] = 'White'
      }
    }
  }
}

Here is your demo in action: https://plnkr.co/edit/RSXUC21tMH95hvXTLK2d?p=info

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}