You could remove the *ngIf
and control the visibility of the content through animation alone. Try the following:
Component:
import { Component } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: [ './app.component.css' ],
animations: [
trigger('displayState', [
state('false', style({ overflow: 'hidden', height: '0px'})),
state('true', style({ overflow: 'hidden', height: '*'})),
transition('false => true', animate('200ms ease-in')),
transition('true => false', animate('200ms ease-out'))
]),
]
})
export class AppComponent {
display = false;
toggle() {
this.display = !this.display;
}
}
Template:
<button (mouseup)="toggle()">Toggle</button>
<br><br>
<div [@displayState]="display" [ngStyle]="{'background-color': '#ff000050'}">
<p>Dynamic content</p>
<p>that is controlled</p>
<p>by animation alone</p>
</div>
Working example: Stackblitz
Update
You could use the existing boolean showDetails
to show additional content with a transition. Again it replaces the *ngIf
with only the animation. Working example: Stackblitz