0

I'm attempting to create a little swipe-able slider that uses just angular and hammerjs. The slides would go in a basic order like [1, 2, 3] etc. but in order to create loop functionality it would need to be something like [clone 3, 1, 2, 3, clone 1].

I have a slider as a component <hammer-slider> and each slide is also a component <hslide>. I then use on the container comp and I collect the QueryList of all the hslide components, this is where I just assumed that I would be able to clone the instances of <hslide> and pop them on either of slide content or wrap in my example.

Example is here - https://stackblitz.com/edit/angular-hammer-slider?file=app%2Fhammer-slider%2Fhammer-slider.component.ts

// This gets me the slides;
@ContentChildren(HSlideComponent) hslides: QueryList<HSlideComponent>

// You can see my attempts 
ngAfterViewInit(){
  console.log(this.hslides);

Most of my attempts using methods like createEmbeddedView seem to move and not copy the Element and also don't keep the style.

I don't know if I'm just missing something simple or if this is even possible or I may just totally be doing all wrong.

Not looking for a referral to npm install some-other-slider

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
Dylan
  • 4,703
  • 1
  • 20
  • 23
  • Perhaps an approach as shown in https://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components would help solving your requirements. – Günter Zöchbauer Feb 26 '18 at 08:01
  • I think this example creates components dynamically by type, but my question is that the components `hslides` have already been created and are part of the View. I would like to duplicate first and last views. – Dylan Feb 26 '18 at 19:42
  • There us no such thing as duplicating components. – Günter Zöchbauer Feb 26 '18 at 19:43
  • So there is no way to take the instance of a component and display it or the element HTML twice? This seems like a common concept, and it would rule out even the idea of slides as components in this use-case, unless you force the end-user to add `[ last | all-slides | first ]`. Or have slide templates for every and all design patterns and only allow object data. – Dylan Feb 26 '18 at 20:49
  • Just use `*ngFor` if you need multiple – Günter Zöchbauer Feb 26 '18 at 20:51
  • `` would be ideal also but unfortunately only 1 content will view – Dylan Feb 26 '18 at 20:58
  • `` is only projecting, not stamping. You can pass a template and stamp it multiple times. https://stackoverflow.com/questions/37676593/how-to-repeat-a-piece-of-html-multiple-times-without-ngfor-and-without-another/37676946#37676946 – Günter Zöchbauer Feb 26 '18 at 21:25

1 Answers1

0

So, I'm doing the exact same coding challenge.

Have you looked into setting up a BehaviorSubject pattern to facilitate communication between the parent component of your slider and the slider itself?

Effectively you can signal back to the parent component what you need done (ie cloning of items [1,2,3] and the placement of this items in the list (e.g. front or end)].

I don't think you want to address this at the DOM level, that's not a viable solution for several reasons. Typically Angular Team discourages direct DOM manipulation for obvious reasons.

Shawn Lovelidge
  • 36
  • 3