Reference to the component's properties are being lost

[fbele]

Hi,

The module is working fine, but there is one thing that I noticed with the update from ng2-owl-carousel to ngx-owl-carousel. If I used a reference to the component's properties in order to update their values in my event callbacks with the old ng2-owl-carousel, they actually got updated and the new value was shown in the template. The same thing however does not work when I use this new ngx-owl-carousel module.

I wrote my callbacks directly in carousel's options like so:

export class MyComponent { public carouselOptions: any = { items: 1, dots: false, navigation: false, onInitialized: (event) => { this.myVar1 = xxxx; // a value to be updated }, onDragged: (event) => { this.myVar2 = xxxx; // a value to be updated } }; }

In template: <owl-carousel [options]="carouselOptions"> ....

{{myVar1}} {{myVar2}}

With the new version of the module (ngx-owl-carousel) this does not work.

Regrads

[mujtaba01]

Possibly same issue #23

[fbele]

It does in fact bind the Component class to the method, but the problem persists, the values of the properties of the Component class are not being updated.

I noticed also the same case as before, it does not work with ngx-owl-carousel Module, but it does however work with the old ng2-owl-carousel Module

[chikakow]

I agree with @fbele I have options set to be: public owlOptions: any = { items: this.numOfItems, onDragged: (event) => { console.log('dragged'); } };

It actually logs 'dragged' but when I change the this.numOfItems when window is resized, it does not update. If I move the configuration to markup it updates. But I need to register onDragged event.

Then I moved configuration to the markup. Now it does everything I wanted.

[options]="{items: this.numOfItems, dots: false, nav: false, onDrag: this.owlDrag.bind(this)}"

[SharanPuthran]

I've implemented owl carousel in angular 6, carousel seems to be working fine. I wanted to change the sliderOptions, so I had given sliderOptions property in my component for it to work on responsiveness and number of items to be shown in a view.

Could anyone help me with this?

Thanks.

<owl-carousel [options]="sliderOptions" [items]="content" [carouselClasses]="['owl-theme', 'row', 'sliding']">

sliderOptions: { margin: 25, dots: false, navigation: true, nav: true, autoplay: true, loop: true, autoplayTimeout: 2000, autoplayHoverPause: true, lazyLoad: true, responsive: { 0: { items: 1 }, 600: { items: 1 }, 960: { items: 1 }, 1200: { items: 1 } }