0

I have created two components in Angular 2:

ReaderComponent: The one that initiates and controls all functionality to Owl Carousel (initiate, add slide, remove slide and so on)

PageComponent: Each slide is a PageComponent and has events to handle input from the user (click, pinch, doubletap)

The ReaderComponent is created at start of the application and initiates a request to a service to get all data for each of the PageComponents. Everything works fine until we add a slide that is a PageComponent. I have tried to add the PageComponent selector to owl Carousel:

this.slider.trigger("add.owl.carousel", ["<my-page-component></my-page-component>"]);

This does add an element of <my-page-component> but does not render the template or handles any of the PageComponents events.

I have tried to add all the PageComponents to an array and render it in ReaderComponents template:

<div *ng-for="#page of pages">
    <my-page></my-page>
</div>

This renders correct but by that time all pages is rendered Owl is already initiated and no pages is visible.

So to summarize all of this: I need to know how to add a custom component via javascript (in this case the add functionality of Owl)? Is this even possible? Or is there another way to handle this so that I can add PageComponent in any way?

TomDoesCode
  • 3,580
  • 2
  • 18
  • 34
Bagera
  • 1
  • 1
  • Possible duplicate of [How to use owl-carousel in Angular2?](http://stackoverflow.com/questions/36615073/how-to-use-owl-carousel-in-angular2) – Murhaf Sousli Jul 07 '16 at 07:31

1 Answers1

0

The first method you mentioned would require you to force angular to re-check it's bindings. This is probably possible, but I don't know off the top of my head.

The second method is much easier. You can use the lifecycle events of the Page or Reader Components to trigger the adding. They are as follows:

export var LIFECYCLE_HOOKS_VALUES = [
  LifecycleHooks.OnInit,
  LifecycleHooks.OnDestroy,
  LifecycleHooks.DoCheck,
  LifecycleHooks.OnChanges,
  LifecycleHooks.AfterContentInit,
  LifecycleHooks.AfterContentChecked,
  LifecycleHooks.AfterViewInit,
  LifecycleHooks.AfterViewChecked
];

If you add a listener to your PageComponent class, you can probably use OnInit or AfterViewChecked and then get it to add it's own element reference to the carousel (basic example). From a quick look at their documentation, it doesn't look like owl supports adding a new element, so you could have the PageComponents all on your page somewhere hidden and then just add the raw html from the elementref, then remove it again in the OnDestroy function.

If you do it in ReaderComponent you should look at OnChanges or add some clever checks into the DoCheck function and then just get it to reload all items inside it (perhaps owl.reinit?). I've not used the owl carousel before so can't be more specific there I'm afraid.

These are exported from the angular class as interfaces, so you should be extending your classes from them. An example is available on the Angular 2 website here: https://angular.io/docs/ts/latest/api/lifecycle_hooks/AfterViewChecked-interface.html

Ben Morton
  • 1
  • 1