I have a list of elements I want to render in Angular, and each element have conditional rendering based on them. The idea is that when they render in or out, the parent div height transitions smoothly.
I am using ngFor to render each point for a form, and I am also utilizing ngIf to deal with conditional rendering. There is a method that checks to see if a item should render based on certain points filled out.
This is what I have so far:
point.ng.html
<form (ngSubmit)="onSubmit()">
<ul *ngFor="let point of points">
<item *ngIf="checkRender(point.name)"
[point]="point"
[form]="form">
</item>
</ul>
<footer>
<submit-button [form]="form"></submit-button>
</footer>
</form>
point.ts
@Component({
selector: 'point',
templateUrl: './point.ng.html',
animations: [trigger(
'grow',
[
transition('void <=> *', []),
transition(
'* <=> *',
[
style({height: '{{startHeight}}px', opacity: 0}),
animate('.5s ease'),
],
{params: {startHeight: 0}})
])],
})
export class PointContainer implements OnChanges {
@Input() form?: FormGroup;
@Input() points?: Point[];
startHeight = 0;
constructor(private element: ElementRef) {}
@HostBinding('@grow')
get grow() {
return {value: this.points, params: {startHeight: this.startHeight}};
}
ngOnChanges() {
this.setStartHeight();
}
checkRender(fieldName: string): boolean {
// checks render service
}
onSubmit() {
console.log("SUBMIT");
}
private setStartHeight() {
console.log(
'HEIGHT CHANGE',
this.startHeight,
this.element.nativeElement.clientHeight);
this.startHeight = this.element.nativeElement.clientHeight;
}
}
However, when I run the code the list doesn't seem to have any sort of animation. Things render and un-render based on their checkRender logic, but no animation occurs. I also noticed that the log for setting the height doesn't seem to run at all, and I'm currently trying to figure out why that is happening.
Any guidance would be greatly appreciated.