Ngx-infinite-scroll: Cannot read property 'nativeElement' of null

[kevincaradant]

Hi

Everytime, I tried to use your ngx-infinite-scroll inside a <md-tab></md-tab> I get the following error:

Cannot read property 'nativeElement' of null

Maybe the component is not ready yet, I don't know but I didn't have any condition to hide it. If it's not in a <md-tab> it works well :)

This is my snippet code:

 <md-tab label="{{'TITLE' | translate}}">
                <md-card *ngIf="displayManagerCard$ | async">
                    <md-card-content>
                        <app-users-manager [userId]="userId"></app-users-manager>
                    </md-card-content>
                </md-card>
   </md-tab>

<app-users-manager> HTML:

  <app-display-list-users [infoToDisplay]='myObs$ | async' (onScroll)="scroll()"></app-display-list-users>

<app-display-list-users> HTML:

<div class="infiniteScroll" fxLayoutWrap fxLayout="row" infiniteScroll [infiniteScrollDistance]="1" infiniteScrollContainer=".display-list-users-component"
  [scrollWindow]="false" (scrolled)="onScroll.emit()">
  <div fxFlex="100" class="display-list-users-component">fdghjdfhgjdfhgjfdgjfd</div>
</div>

Thank you in advance

[lucashaensch]

I'm having the same issue here

[lucashaensch]

I updated my node and npm versions and it solved! :)

[orizens]

fixed by f042c6a

[kevincaradant]

Hi

@lucashaensch, I tried the last version of npm and node but I'm still have this issue. I tried to remove all node_modules etc, to have something clean.

@orizens, It's not fixed in my case, even with the fix as you mentioned. I'm running in the 0.5.2 version. Before I was in 0.5.1.

To remember: If I'm running in the current tab during the loading of the browser page, it's ok. If I call your directive in a component which is in the other tab, BIM I throw the error mentioned in the issue.

[kevincaradant]

[orizens]

hi @kevincaradant can you reproduce the bug in a plunkr or jsfiddle?

[kevincaradant]

Hi, OK let me one day, Im going to try to reproduce the problèm.

[kevincaradant]

this is the example : https://plnkr.co/edit/whH5fN27gfXHRlTyv9I2?p=preview

[orizens]

@kevincaradant thanks for reproducing. i reopened this one - i have a direction of how to fix this.

[orizens]

hi @kevincaradant
can you update the plunkr? - it seems to be broken now.

[kevincaradant]

Yes it's because the versions of angular and material are not defined explicitly in the plunker. Since beta11 of material angular, the tag <md-something></md-something> is deprecated. Now we have to use <mat-something></mat-something>.
I updated the code to be compatible with the latest version of material and angular.
New version of the plunker: https://plnkr.co/edit/whH5fN27gfXHRlTyv9I2?p=preview

[orizens]

it still loads with error and "md-" components

[kevincaradant]

I don't understand why, my version is working from my side

Use this plunker: https://plnkr.co/edit/whH5fN27gfXHRlTyv9I2?p=preview with Chrome Browser >V60 because under Firefox, it's broken ( problem of librairies loading )...

[orizens]

make sure the plunkr revision you're seeing is saved.

On Wed, Oct 11, 2017 at 4:37 PM Kévin [e-mail] wrote:

I don't understand why, my version is working from my side

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
https://github.com/orizens/ngx-infinite-scroll/issues/191#issuecomment-335812096,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AA1oRGQb88gPX5maJ_RsQLyIoQhgNEOrks5srMSggaJpZM4PgYE1
.

>

Oren Farhi
Founder at Orizens.com
Senior Front End Engineer & Consultant
http://www.orizens.com

[kevincaradant]

I gave the link to my colleague and it works for him. It was the first time for him, so maybe you have some cache. Retry in the "hide navigation" with your browser :)
I'm using Chrome Version 61, Windows 7 64 bits

[orizens]

seeing it now. thanks.

[orizens]

hi @kevincaradant
please check beta version and let me know if this issue is fixed
ngx-infinite-scroll@beta

[abedzantout]

hi @orizens
Where do you access the beta version?

[kevincaradant]

Hi

Sorry, I didn't see your message @orizens. Thanks at @abdedzantout for your question which send me an e-mail :). Im going to try tomorrow. The bêta version should be available in the release section I think :).

[kevincaradant]

@abedzantout, just update to the latest version 0.6.1 and everything works well :)

@orizens, I can confirm, the bug is resolved. Thank you

[abedzantout]

@kevincaradant I'm afraid it works on 0.5.2 but not on 0.6.1. Hopefully this will get fixed in the next version :)

[kevincaradant]

@abedzantout, are you sure, we're talking about the same issue ?

Look at this plunker: https://plnkr.co/edit/SqqixtPXJKvlHgstaPrb?p=preview

It's the same than before but I replace the version 0.5.2 by 0.6.1 and everything is working now

Please, if you can make a plunker, that will be more easy to understand your issue

[pegaltier]

Try adding:
infiniteScrollContainer=".your-container-class"
[fromRoot]="true"

[joaogarin]

Hello,

I am getting a similar problem with Material beta.12 scrolling inside a sidenav container.

Any idea what the problem might be here? I am using version 6.0.1 was working well on version 0.5.1 =/

Best regards
Joao Garin

[orizens]

hi @joaogarin
please try to reproduce and attach a demo plunkr.

[joaogarin]

I think my use case as I read somewhere else is not supported.as I am using this inside a material2 sidenav container. But it was working before..

Anyways I will try and debug, but I understand that its a specific use case..

edit : I managed to get around it by setting some specifics on the material components so all good on my side 👍 tks for the support