1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Angular parallax video with *ngIf

Ungr pro asked 5 years 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 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.

Bartosz Termena staff answered 5 years 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 commented 5 years ago

Hello,

using provided answers finally led us to solving the issue.

Thank you for cooperation

Damian Gemza staff answered 5 years 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 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.

Damian Gemza staff answered 5 years 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 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?

Ungr pro answered 5 years ago

Hello,

sadly I am not allowed to share the project.

Has there been any progress made so far?

Ungr pro answered 5 years 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 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

Ungr pro answered 5 years 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 5 years ago

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

Damian Gemza staff answered 5 years 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

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Resolved

Specification of the issue
  • ForumUser: 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
Tags
parallax
About author
Ungr
Pro User 198Support score
17Questions 11Answers 5Snippets