Angular parallax video with *ngIf

web
mobile

Topic: Angular parallax video with *ngIf

Ungr pro premium asked 4 months ago

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>

Arkadiusz Idzikowski staff commented 4 months 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 premium commented 4 months 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.


Bartosz Termena staff answered 3 months ago

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 premium commented 3 months ago

Hello,

using provided answers finally led us to solving the issue.

Thank you for cooperation


Damian Gemza staff answered 4 months ago

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


Ungr pro premium answered 4 months ago

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 4 months ago

So combine those two approaches - use [attr.data-jarallax-video]="video". Maybe this will work for you.


Ungr pro premium answered 4 months ago

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 4 months 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


Ungr pro premium answered 4 months ago

Hello,

sadly I am not allowed to share the project.

Has there been any progress made so far?


Damian Gemza staff answered 4 months ago

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 premium commented 4 months 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?


Damian Gemza staff answered 4 months ago

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 premium commented 4 months 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 4 months ago

We are currently investigating this problem and we will inform you when working example will be ready.


Please insert min. 20 characters.
Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: Angular
  • MDB Version: 7.5.4
  • Device: PC
  • Browser: Chrome
  • OS: Win
  • Provided sample code: No
  • Provided link: No
Tags