Scroll not displayed when using ng-content and ngIf in child component

[rmeshksar]

Hi, I am using a component library and noticed that scroll is not displayed when using one of those components. In order to simulate the situation I simplified it in this link: https://stackblitz.com/edit/angular-ivy-anoj89

There is a child component called Hello and it uses ngIf and ng-content.

<div *ngIf="display">
    <ng-content></ng-content>
</div>

Now when used in the parent component with slimScroll directive, it does not get displayed. In fact when checking the DOM the wrapper does not exists.

<hello>
   <div style="max-height: 100px; width: 300px" slimScroll>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
    aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
    sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
   </div>
</hello>

As I mentioned it is a simplified version of the third party component that I use and cannot change the internals of that.

One of the way to solve this issue is to add another input to slimScroll directive, we can call it delayed (boolean, default = false). If the delated value is true we can run setup in a setTimeout.

I tried that locally and seems to be working. If you think that is an acceptable approach I can create PR.

Thanks.

[jkuri]

hi @rmeshksar, If that solves the issue I would be happy to accept the pr.

[rmeshksar]

I noticed my suggested solution won't work in all cases, specially when there are some ngIf logic inside the child component that can happen dynamically. This is due the fact that in Angular ng-content gets built and initialized even if ngIf is false.

I found another library that works for me, so, I don't need this to get fixed.