Seeking a way to have a component called information-board that animates away after a few seconds, I decided on making it slide up as an exit animation. My plan is to achieve this using CSS animations as discussed in this thread: Angular 2 Slide Up and Down Animation
The SCSS code for my info-board component is quite simple:
.info-board {
transition: height 1s;
overflow: hidden;
}
An issue arises from the statement made in the aforementioned thread: The height set to 'auto' cannot be animated. While this makes sense, it poses a problem for me because my information-board needs to be a shared component that can start off invisible and only appear when triggered by certain events.
Looking at the HTML structure of my component:
<div *ngIf="informationMessage">
<div #contentElement class="info-board" [style.height]="contentHeight">
<alert type="{{alertType}}">
<strong>{{ informationHeading }}</strong> {{ informationMessage.messageText }}
</alert>
</div>
</div>
It's a fairly straightforward setup: If the informationMessage data transfer object (dto) is available, display the component. I use binding to dynamically set the height for proper animation. However, the tricky part comes in when the info-board is initially hidden. In this case, I need to wait for the DTO to be set and the HTML to be rendered. So far, the "afterViewChecked" hook has been used for this purpose, resulting in the following 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 seems to ensure that ViewChild is properly set, but it might be too late in the rendering process. As it's the final step in the change tracking logic, the height value I set could potentially be ignored. Another option that looked promising was "ngAfterContentChecked," but in that event, ViewChild is not yet set. I also explored ways to trigger a re-render of the change tracking or tried the method mentioned in Angular 2 @ViewChild in *ngIf with ViewChildren without success.
Could there be some other approach I'm missing? While I understand that relying on nativeElements may not be ideal, it seems necessary for handling dynamic heights based on my research.