Topic: Angular parallax video with *ngIf
Hello,
so I got this issue where the parallax video is not loaded after I add *ngIf directive. Without the directive video plays fine.
Do you have any suggestions how to fix this?
<div class="view jarallax" *ngIf="parallax === 'home'" data-jarallax-video="mp4:../../../../../assets/vid/app/pages/intro.mp4">
<div class="mask rgba-stylish-light d-flex justify-content-center align-items-center">
<div class="container">
<div class="row">
<div class="col-md-12 text-white text-center">
<h1 class="display-4 font-weight-bold">Title</h1>
<hr class="hr-light">
<h2 class="lead mb-3 ff-ro">Title 2</h2>
<div class="smooth-scroll mt-5">
<a mdbBtn color="white" mdbWavesEffect outline="true" href="#lpg-2"><i class="fa fa-home"></i> Btn 2</a>
</div>
</div>
</div>
</div>
</div>
</div>
Dear @Ungr
The problem is that nothing triggers Angular change detection mechanism.
You have to inject the ChangeDetectorRef:
constructor(private changeDetector: ChangeDetectorRef) {}
Then you call it after updating the variable that controls the ngIf, and then you set the video.
Here is an example of my full code:
TS:
statement = false;
constructor(private changeDetector: ChangeDetectorRef) {}
setVideo() {
jarallax(document.querySelectorAll('.jarallax-my-video'), {
speed: 0.2,
videoSrc: 'https://vimeo.com/110138539',
});
}
changeStatement() {
this.statement = true;
this.changeDetector.detectChanges();
this.setVideo();
}
HTML:
<div *ngIf="statement">
<div class="jarallax jarallax-my-video">
<div class="full-bg-img mask rgba-white-light">
<div class="container">
<div class="d-flex align-items-center d-flex justify-content-center" style="height: 1200px">
<div class="row mt-5">
<div class="col-md-12 wow fadeIn mb-3">
<div class="intro-info-content text-center">
<h2 class="h1 display-1 mb-2 wow fadeInDown" data-wow-delay="0.3s">
CARLA <a class="indigo-text font-bold">SMITH</a>
</h2>
<h5 class="font-up mb-3 mt-1 font-bold wow fadeIn" data-wow-delay="0.4s">
Web developer & graphic designer
</h5>
<a
mdbBtn
color="light-blue"
size="lg"
class="wow fadeIn waves-light"
mdbWavesEffect
data-wow-delay="0.4s"
>portfolio</a
>
<a
mdbBtn
color="indigo"
size="lg"
class="wow fadeIn waves-light"
mdbWavesEffect
data-wow-delay="0.4s"
>About me</a
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button (click)="changeStatement()">click to show video parallax</button>
Also, as you see, I am using videoSrc instead of data-jarallax-video.
Video Parallax examples will be added soon to the documentation.
Best Regards, Bartosz.
Ungr pro commented 5 years ago
Hello,
using provided answers finally led us to solving the issue.
Thank you for cooperation
Dear @Ungr
Did you tried following solution? Adding video as property binding:
.html:
<div class="view intro" style="background-image: none; z-index: 0; min-height: 700px;">
<div class="full-bg-img mask rgba-white-light">
<div class="container flex-center">
<div class="row mt-5 py-5">
<div class="col-md-12 wow fadeIn mb-3" style="animation-name: none; visibility: visible;">
<div class="text-center">
<h2 class="h1 display-2 mb-2 wow fadeInDown" data-wow-delay="0.3s">ANNA'S <a class="white-text font-bold">BLOG</a></h2>
<h5 class="font-up mb-3 mt-1 font-bold wow fadeInDown" data-wow-delay="0.4s">Interior designer & Nature lover</h5>
<a mdbBtn color="elegant" size="lg" class="wow fadeInDown waves-effect waves-light" mdbWavesEffect data-wow-delay="0.4s">portfolio</a>
<a mdbBtn color="white" outline="true" size="lg" class="wow fadeInDown waves-effect waves-light" mdbWavesEffect data-wow-delay="0.4s">About me</a>
</div>
</div>
</div>
</div>
</div>
<div class="video-parallax" *ngIf="video"><video [src]="video" frameborder="0" autoplay="" loop=""></video>
</div>
</div>
<div class="container">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-12 text-center my-5">
<h2 class="h1 font-bold grey-text mb-5">Lorem ipsum dolor sit amet, consectetur quis elit.</h2>
<p align="justify">Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.</p>
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</div>
.ts:
video = '';
ngAfterViewInit() {
setTimeout(() => {
this.video = 'https://mdbootstrap.com/img/video/flowers.mp4';
}, 4000);
}
Best Regards,
Damian
Hello Damian,
this is a tricky answer as Ive tried this aproach before and the video loads fine. However parallax effect is missing here.
The only way I was able to achieve parallax effect was to use:
<div class="view jarallax" *ngIf="parallax === 'home'" data-jarallax-video="mp4:../../../../../assets/vid/app/pages/intro.mp4">
Using:
<div class="video-parallax" *ngIf="video"><video [src]="video" frameborder="0" autoplay="" loop=""></video>
</div>
is just a normal video without parallax..
Damian Gemza staff commented 5 years ago
So combine those two approaches - use [attr.data-jarallax-video]="video". Maybe this will work for you.
No. This doesnt really work. Any other suggestions to solve this?
Seems to me you dont really support video parallax in angular..
Damian Gemza staff commented 5 years ago
Unfortunately, I have no other idea. I'll have to debug this problem. We'll let you know when this problem will be resolved.
EDIT: Could you please send me your project via email? You can find me here: d.gemza@mdbootstrap.com
Best Regards,
Damian
Hello,
sadly I am not allowed to share the project.
Has there been any progress made so far?
Dear @Ungr
We have extended the Parallax docs to show, how to install them in the project - feel free to check if everything is okay in your application.
If you can't share me the whole app on which you're working on, please create the new blank application where you'll put only the parallax - in this app your problem has to be visible, so I can debug it.
Best Regards,
Damian
Ungr pro commented 5 years ago
Hello Damian,
I was watching the angular docs and there isnt a working example of video parallax. Ive tried on deployment of mine and even using MDB snippets function.
Would you be able to provide a working example of video with parallax effect and then we can possibly move onto another stage?
Dear @Ungr
I'll try to provide a working example for Video Parallax. I'll let you know when I'll have this example working.
Best Regards,
Damian
Ungr pro commented 5 years ago
Hello Damian,
have you made any progress in soslving the issue?
We have deploy tasks waiting for this one to be fixed/solved.
Arkadiusz Idzikowski staff commented 5 years ago
We are currently investigating this problem and we will inform you when working example will be ready.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.5.4
- Device: PC
- Browser: Chrome
- OS: Win
- Provided sample code: No
- Provided link: No
Arkadiusz Idzikowski staff commented 5 years ago
What is the exact problem in this case? The video is not loaded at all or there is simply no parallax effect?
Can you provide an example with full code (html and ts) so we can debug this problem properly?
Ungr pro commented 5 years ago
The problem is *ngIf="parallax === true" depends on variable that is filled with async call
So my guess is solution would be to set data-jarallax-video="..." to parallax element after async response was returned and refresh the element. But there is no documentation how to do such things like that with angular.