Angular 2 animating height-propery -Timing on binding

Question

I'd like to have a component, I called it information-board, to animate away after some seconds. I had the idea to make it slide up as exit-animation. My approach for this is quite simple, since I can do this with css-animations regarding to this thread: Angular 2 Slide Up and Down Animation

My scss-file is looking quite simple:

.info-board {
  transition: height 1s;
  overflow: hidden;
}

The problem arises in the sentence from the mentioned thread: The height set to 'auto' can't be animated. This makes sense, I guess, but causing me a heap of trouble, because my information-board should be a shared component and also be allowed to be invisible at the start, only being shown when something interesting happens.

So, looking at my component-html:

<div *ngIf="informationMessage">
  <div #contentElement class="info-board" [style.height]="contentHeight">
    <alert type="{{alertType}}">
      <strong>{{ informationHeading }}</strong> {{ informationMessage.messageText }}
    </alert>
  </div>
</div>

Nothing too fancy: If the informationMessage, a simple dto, is set, it should be shown. I set the height via binding in order to animate it properly. Now the complicated part: If the info-board is not shown at the beginning, I basically need to wait for the dto to be set AND the html to be rendered. The only hook I found so far is the "afterViewChecked" one, leading to this Code:

@ViewChild('contentElement') public contentElement: ElementRef;

  ngAfterViewChecked(): void {
    this.checkSetBoardSize();
  }

  private checkSetBoardSize() {
    if (this.contentElement && this.contentElement.nativeElement) {
      this.contentHeight = this.contentElement.nativeElement.scrollHeight + 'px';
    }
  }

This event is the only one I can be sure, that the ViewChild is set, but it seems to be too late: Since this is the last step of the changetracking-logic, the height I set is ignored. The only other hook, which looked helpful was "ngAfterContentChecked", but in this one, the ViewChild is not set. I also didn't find a possibility to 'retrigger' the changetracking nor did the approach on Angular 2 @ViewChild in *ngIf with ViewChildren work for me.

Am I missing some sort of possibility? I know, that working with the nativeElements isn't a good idea, but from my research, this is currently needed working with heights.

Please spell-check your question title. – Mar 05 '17 at 13:11 — , Mar 05 '17 at 13:11

cyr_x · Accepted Answer · 2017-03-05T14:42:37.730

1

You could use the animation feature of Angular, the example for ur case can be found in the angular docs

Sidenote: Be aware that the usage of the animation package (it's outsourced to @angular/animations) is changing in angular version >4.0.0-rc.1. For more the the changelog of angular

edited Mar 05 '17 at 14:42

answered Mar 05 '17 at 13:01

cyr_x

13,987
2
32
46

Oh my god, I kinda tried to toy around with the animations, and there it is. – Matthias Müller Mar 05 '17 at 14:39
Thanks for the sidenote. Sorry, if I abuse the topic for a second question: I came up with css-animations due to infinite loops, for example rotation. From what I've read, this is in fact easier done with the css-stuff, or did I ALSO miss that one on the angular-animations? – Matthias Müller Mar 05 '17 at 14:50

Angular 2 animating height-propery -Timing on binding

1 Answers1