Cannot read property 'nativeElement' of undefined

[ankitjainOfficial]

What is the expected behavior?

There should be no error

What is the current behavior?

TypeError: Cannot read property 'nativeElement' of undefined
at GalleryVideoComponent.set pauseVideo [as pauseVideo] (ngx-gallery-core.js:1512)
at setInputsForProperty (core.js:8657)
at elementPropertyInternal (core.js:7703)
at ɵɵproperty (core.js:13788)
at GalleryItemComponent_ng_container_0_gallery_video_2_Template (ngx-gallery-core.js:254)

What are the steps to reproduce?

https://stackblitz.com/edit/angular-ivy-aap6wb

Which versions are you using for the following packages?

Angular: 10
Angular CDK: 10
Angular CLI: 10
Typescript: 3.9
Gallery: 4

Is there anything else we should know?

I don't think so.

Please let me know, if I did a mistake somewhere. Thanks. :)

[MurhafSousli]

That's weird especially that it seems to work but still throwing the error

[ankitjainOfficial]

Yes, this is working. And, I could not find any problems in its working.

[cybercussion]

Same boat here -
[Error] ERROR – TypeError: undefined is not an object (evaluating 'this.iframe.nativeElement')
TypeError: undefined is not an object (evaluating 'this.iframe.nativeElement')
Also getting a lot of -
[Error] Failed to load resource: the server responded with a status of 500 () (log_event, line 0) against YouTube. -- Update ( this was caused by Adguard)

Was using 5.0.0-beta0 getting ahead of v4?

Also notice videos don't always load up, some do and some after some time.

Update- the video not showing up seems to be some view issue. If I Scroll up, then back down I see it appear.

Fixing this with https://stackoverflow.com/questions/41990171/angular-2-not-re-rendering-until-i-click-the-page

For some reason not all the videos were loading up as they were selected or 'slided' to. Adding the ChangeDetectorRef, and adding a subscription to indexChanged helped render the videos.

[GlauberF]

same problem here.
in my case with the error, it is not working

[MurhafSousli]

@cybercussion I am aware of this, It is not related to the change detection, but it seems to be a browser issue, and it behaves differently in different browsers. it is caused by slide in the new video, try to disable the transition in your global styles and see if the videos load properly

.g-slider {
   transition: transform 400ms cubic-bezier(0.5, 0, 0.5, 1);
}

For this I will investigate a workaround in the future.

@GlauberF Thanks for pointing out, I will fix that soon once I get the time.

[cybercussion]

Seems somewhat related to vaadin/vaadin-grid#411 and also seems like a issue with a element with a *ngIf on it. The one post further down on that page seemed to wrap some code with a setTimeout (my classic go to when natively coding in JavaScript hah!