Not working as component with ng-content

[blasco]

• I'm submitting a ...

  • bug report
  • feature request
  • support request => Please do not submit support request here, see note at the top of this template.

• What is the current behavior?

The component is not working when elements are provided with <ng-content>. I think it is useful to have this component inside another component, the motivation is to customize style and buttons, so it is reusable throughout the app.

Demo:
https://stackblitz.com/edit/angular-ivy-rpqrxh

• What is the expected behavior?

    <drag-scroll style="width:100px" #navComponent>
          <ng-content></ng-content>
    </drag-scroll>
    
    <button (click)="moveLeft()">Left</button>
    <button (click)="moveRight()">Right</button>
    <button (click)="moveTo(2)">Last</button>

This should work from my point of view, not sure what is causing it not to work.

• Please tell us about your environment:

  • Version: Angular 9, latest version of ngx-drag-scroll
  • Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

[Viktor-Bredihin]

any workaround? This library is not useful without this functionality, since u would have to copy past navigation logic in every component

[bfwg]

This library doesn't support this functionality at the moment. Duplicate #207 . I'm very busy with work recently. If you like to help, a PR is more than welcome. 😄

[bfwg]

You can wrap your ng-content with a drag-scroll-item wrapper as a workaround.

<span drag-scroll-item>
  <ng-content</ng-content>
</span>

[Viktor-Bredihin]

why would I need carousel with one item? can u provide a full example in case I didn't get you right?

[bfwg]

Sorry, I should've mentioned that this work around only will work for one large item. Multi-item drag-scroll with ng-content is not supported by the library at the moment.

[Viktor-Bredihin]

Got it, thanks. Then I would have to copypast it everywhere for now

[blasco]

As a walk-around, it does work with ngFor, so we can pass the data to the component as an @input. Not great, but better than copy pasting...

[Viktor-Bredihin]

each carousel needs it's own design, how do you propose to pass array of custom html elements to the component?

[blasco]

Maybe the code owner can guide us about why this is not working and we can all find a solution.

[blasco]

@Viktor-Bredihin True that each carousel has its own design, but still, making components reusable is very important. For example, I have a carousel where I have arrows for the next and previous, this behavior is independent of the content of the carousel. With the current design, I need to make 3 different carousels that look exactly the same which have the exact same behavior, just because the content of them is different.

Pseudo code of the ideal solution:

<my-carousel>
    <component-one dragScrollItem *ngFor='let item of itemsOne'></component-one>
</my-carousel>
<my-carousel>
    <component-two dragScrollItem *ngFor='let item of itemsTwo'></component-two>
</my-carousel>

With only one implementation for my-carousel:

<drag-scroll>
   <ng-content></ng-content>
</drag-scroll>

The only option right now is

<my-carousel-one [items]='itemsOne'>
</my-carousel-one>
<my-carousel-two [items]='itemsTwo'>
</my-carousel-two>

And in the implementation of carousel-one:

<drag-scroll>
   <component-one dragScrollItem *ngFor='let item of items'></component-one>
</drag-scroll>

And in the implementation of carousel-two:

<drag-scroll>
   <component-two dragScrollItem *ngFor='let item of items'></component-two>
</drag-scroll>

so I need two exact carousels.... a lot of code duplication. When I want to change the behavior of one of them I need to update the others too.

[romulodanzot]

<drag-scroll>
      <div drag-scroll-item class='hide-element'></div> 
      <ng-container></ng-container>
</drag-scroll>

<style>
.hide-element{
      display: none !important;
}
</style>

while fixing the bug. It worked for me.

[blasco]

@romulodanzot it should be <ng-content>, I've tested your proposed solution and unfortunately it doesn't work.