-1

I've been search for quite a while, but i wasn't able to find a good solution to this. I have to trigger a function/event, as soon as the DOM of a component finished rendering. I need to access the height of the component, so ngAfterViewInit won't work, as that is called before the DOM is rendered. I tried ngAfterViewChecked, but this gets called multiple times. As the function that gets executed is part of a wrapper-app, i have no access to that either, and i absolutely need to make sure it only gets fired once. I was thinking about using ngAfterViewChecked with some sort of debounce, but this feels (and probably is) wrong. The alternative would be to trigger a function from the template, when the ngFor loop reaches the last item. But again, that just feels wrong.

Any input is appreciated

sejay44069
  • 7
  • 5
  • The quick solution is `settimeout`, get the DOM element after this event loop. – LiHao Nov 06 '20 at 16:56
  • Does this answer your question? [How to call function after dom renders in Angular2?](https://stackoverflow.com/questions/31171084/how-to-call-function-after-dom-renders-in-angular2) – tommueller Nov 06 '20 at 17:00
  • 1
    Can you provide an example ? – Lashan Fernando Nov 06 '20 at 17:21
  • 1
    Ah, sorry i forgot to mention this. For some reason, setTimeout also gets called too early. @tommueller No, sadly not. I have to check if the page can be scrolled down or up. The default value for those is false, and if the content fits, both of them will remain false. Providing an example is kind of hard, considering i'm working on an app that gets wrapped by another app. At the end of the day, my Angular app will sit inside an iframe, and i have to pass an event to the parent when any of the routes finishes rendering. – sejay44069 Nov 06 '20 at 17:51
  • @LiHao that would be the worst possible way to get around the issue. – Austin T French Nov 06 '20 at 18:56
  • did you try ngAfterViewInit ? https://stackoverflow.com/questions/35728731/how-to-run-a-jquery-function-in-angular-2-after-every-component-finish-loading – Austin T French Nov 06 '20 at 18:58
  • @AustinTFrench Sometime the third part library needs to use setTimeout, I know It's the worst solution. – LiHao Nov 07 '20 at 09:11
  • afterViewInit is called before the DOM is rendered – sejay44069 Nov 09 '20 at 10:08

1 Answers1

-1

I got around this issue by using ngAfterViewChecked. On every check, i get the scrollHeight of the components body. Before it renders, it will be 0, so checking if there's been a change on the scrollHeight attribute, works for my use case.

Thanks for all the comments, that actually made me think of this solution

sejay44069
  • 7
  • 5