Not working correctly on lazy loaded module

[plastikaweb]

Hi,

I've got exactly the same code in my main app component, and in a lazy loaded component.

• app.component.html // lazy.component.html

<div (click)="change()">click</div>
<owl-carousel #owlElement
              [options]="carouselOptions"
              [items]="images"
              [carouselClasses]="['owl-theme', 'sliding']">
  <div class="item deal-slide" *ngFor="let image of images;let i = index">

    <div class="coupons-div" style="cursor:pointer;">
      <img class="deals-image" src="{{image}}"/><br/>
    </div>
  </div>
</owl-carousel>

• app.component.ts // lazy.component.ts

export class AppComponent {
  images = [
    'img1.jpg',
    'img2.jpg'
  ];

  carouselOptions: any = {
    nav: true,
    dots: false,
    loop: true,
    items: 2
  };

  change() {
    this.images = [
     'img3.jpg',
     'img4.jpg
    ];
  }

• First load:
  • In the main component all works correctly.
  • In the lazy loaded component does not loads the images in the carousel.
• When click btn calling change method:
  • In the main component loads the new contents correctly.
  • In the lazy loaded component when I click it twice loads the new images correctly.

I've got in both the main.module.ts and the lazy.module.ts imported the OwlModule module. I don't know if I've doing something wrong or it is a bug.

Any ideas? Thanks in advance!

[ghost]

I have the same probleme.

I can see with the inspector that ng carousel markup has been added in the html.

But no carousel visible.