0

So I have a custom component with some animations that needs to call changeDectector.detectChanges()

from my childComponent.ts:

public onLoad(): void {
  this.startAnimations()
}

private startAnimations(): void {
  //.. some animations
  this.changeDetector.detectChanges()
}

This was working until I added a ngif to my parent component like this:

<StackLayout *ngIf="isReady">
  <ChildComponent></ChildComponent>
</StackLayout>

For some reason when I added the ngif, it's causing the childComponent to call onLoad multipleTimes. So every time I call this.changeDetector.detectChanges(), then the onLoad method is trigger causing a "Maximum call stack size exceeded." Does anyone know what's going on here? and how do I fix it?

Thanks in advance guys!

Felipe Centeno
  • 2,911
  • 1
  • 21
  • 39
  • 1
    The `*ngIf` directive completely removes the child elements when its value is falsey and adds them back when its value is truthy. So every time the flag changes, it is loading the child component again. Consider using `hidden` instead of `*ngIf`. – DeborahK Feb 01 '19 at 00:09
  • Yeah thanks. I tried hidden before, but it's not working. It might be related to this: https://stackoverflow.com/questions/3970455/overflow-hidden-not-working, I think that's probably the way to go though. – Felipe Centeno Feb 01 '19 at 00:13
  • 1
    We still need to understand why creating child component causing stackoverflow, but not the first time. – ABOS Feb 01 '19 at 00:18
  • I'm still not sure why this happens, but I settled for moving my startAnimation call to ngAfterViewChecked. – Felipe Centeno Feb 01 '19 at 15:58

0 Answers0