issue with pro Carousel component

Topic: issue with pro Carousel component

maverik1815 free asked 5 years ago

Expected behavior carousel should not show error in in console Actual behavior

Console. error in carousel.component ERROR TypeError: Cannot read property 'classList' of undefined at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.addClass (vendor.js:82268) at BaseAnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.addClass (vendor.js:80875) at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.addClass (vendor.js:71172) at CarouselComponent.push../node_modules/ng-uikit-pro-standard/fesm5/ng-uikit-pro-standard.js.CarouselComponent.ngAfterViewInit (vendor.js:93051) at callProviderLifecycles (vendor.js:69268) at callElementProvidersLifecycles (vendor.js:69242) at callLifecycleHooksChildrenFirst (vendor.js:69232) at checkAndUpdateView (vendor.js:70168) at callViewAction (vendor.js:70400) at execComponentViewsAction (vendor.js:70342)

Resources (screenshots, code snippets etc.)

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear Rory,

As I said before, I'm not able to reproduce this problem.

Is there a possibility to send me the whole app where that console error appears? Please send it to me via email, here's my address: d.gemza@mdbootstrap.com

Best Regards,

Damian

Tyn free commented 5 years ago

Hello! I am having the same problem. The problem occurs when you do ng-for in mdb-carousel-item. Any clues of how to fix that?

Arkadiusz Idzikowski staff commented 5 years ago

We found the cause of this problem and it should be fixed in next version of MDB Angular.

carlosalviz free commented 5 years ago

Hi! Just 1 question.

This issue got solved? I used to worked fine with it, inside the 7.5.1 version. But now with the new one (7.5.3) it started to fail. *same error showed in this ticket.

Arkadiusz Idzikowski staff commented 5 years ago

It looks like this problem wasn't resolve completely and still occurs in some cases. We are already working on it and there shouldn't be any problems with that in 7.5.4. Sorry for the inconvenience.

carlosalviz free commented 5 years ago

Tks for the replay! I'll wait for the next version.

Add comment

rory free answered 5 years ago

0 0 Best answer

<p>I'm getting the same issue with Angular carousel on MDB free. The sample code works fine from the MDB page (<a href="https://mdbootstrap.com/docs/angular/advanced/carousel/" target="_blank">https://mdbootstrap.com/docs/angular/advanced/carousel/</a>) but when I try and use an *ngFor to display actual data, I get the error. My TS is simply returning an array called sites[] which has objects with properties url, text, subtext, so a very basic data source.</p>

<p>The carousel is still working but I don't like having the console filled with paragraphs of errors.</p>

<p>I've included my code template and the full error below.</p>

<p>thanks for any help</p>

<pre class="prettyprint"><code><mdb-carousel class="carousel slide carousel-fade" [animation]="'fade'">
  <mdb-carousel-item *ngFor="let img of sites">
    <div class="view w-100">
      <img class="d-block w-100" src="{{ img.url }}">
      <div class="mask rgba-black-light waves-light" mdbWavesEffect></div>
    </div>
    <div class="carousel-caption">
        <h3 class="h3-responsive">{{ img.text }}</h3>
        <p>{{ img.subtext }}</p>
      </div>
  </mdb-carousel-item>
</mdb-carousel>
</code></pre>

<p>ERROR TypeError: Cannot read property 'classList' of undefined
    at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.addClass (platform-browser.js:1111)
    at BaseAnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.addClass (animations.js:239)
    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.addClass (core.js:24320)
    at CarouselComponent.push../node_modules/angular-bootstrap-md/fesm5/angular-bootstrap-md.js.CarouselComponent.ngAfterViewInit (angular-bootstrap-md.js:1721)
    at callProviderLifecycles (core.js:22416)
    at callElementProvidersLifecycles (core.js:22390)
    at callLifecycleHooksChildrenFirst (core.js:22380)
    at checkAndUpdateView (core.js:23316)
    at callViewAction (core.js:23548)
    at execComponentViewsAction (core.js:23490)</p>

Please insert min. 20 characters.

I'm getting the same issue with Angular carousel on MDB free. The sample code works fine from the MDB page (https://mdbootstrap.com/docs/angular/advanced/carousel/) but when I try and use an *ngFor to display actual data, I get the error. My TS is simply returning an array called sites[] which has objects with properties url, text, subtext, so a very basic data source.

The carousel is still working but I don't like having the console filled with paragraphs of errors.

I've included my code template and the full error below.

thanks for any help

Rory

<mdb-carousel class="carousel slide carousel-fade" [animation]="'fade'">
  <mdb-carousel-item *ngFor="let img of sites">
    <div class="view w-100">
      <img class="d-block w-100" src="{{ img.url }}">
      <div class="mask rgba-black-light waves-light" mdbWavesEffect></div>
    </div>
    <div class="carousel-caption">
        <h3 class="h3-responsive">{{ img.text }}</h3>
        <p>{{ img.subtext }}</p>
      </div>
  </mdb-carousel-item>
</mdb-carousel>

ERROR TypeError: Cannot read property 'classList' of undefined at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.addClass (platform-browser.js:1111) at BaseAnimationRenderer.push../node_modules/@angular/platform-browser/fesm5/animations.js.BaseAnimationRenderer.addClass (animations.js:239) at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.addClass (core.js:24320) at CarouselComponent.push../node_modules/angular-bootstrap-md/fesm5/angular-bootstrap-md.js.CarouselComponent.ngAfterViewInit (angular-bootstrap-md.js:1721) at callProviderLifecycles (core.js:22416) at callElementProvidersLifecycles (core.js:22390) at callLifecycleHooksChildrenFirst (core.js:22380) at checkAndUpdateView (core.js:23316) at callViewAction (core.js:23548) at execComponentViewsAction (core.js:23490)

Add comment

Damian Gemza staff answered 5 years ago

0 0 Best answer

Dear maverik1815,

Could you please provide me with the code which causes you that problem? I'm unable to reproduce it on my end.

Best Regards,

Damian

Add comment

Closed

This topic is closed.

FREE CONSULTATION

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

Status

Closed

Specification of the issue

ForumUser: Free
Premium support: No
Technology: MDB Angular
MDB Version: 7.4.3
Device: PC
Browser: Chrome
OS: UBUNTU
Provided sample code: No
Provided link: No

maverik1815

12Support score
2Questions 0Answers 0Snippets