Error when there are no elements inside <drag-scroll> and scrollbar should be hidden

[IlCallo]

• Do you want to request a feature or report a bug? Bug

• What is the current behavior? Since 7.1.4, package has an error if elements inside <drag-scroll> are inserted dynamically using *ngFor (or any other situation when there are 0 elements inside I guess) and scrollbar should be hidden.

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem you can use the demo site as an example or via https://plnkr.co This is my setup.

<drag-scroll scrollbar-hidden="true" drag-scroll-y-disabled="true">
    <ng-container *ngFor="let item of items">
      // Stuff
    </ng-container>
  </drag-scroll>

• What is the expected behavior? It should not fire off errors.

• Please tell us about your environment:

  • Version: 7.3.1
  • Browser: [all]

• Other information (e.g. detailed explanation, stacktraces, related issues, suggestions how to fix, links for us to have context, eg. stackoverflow, gitter, etc) The error.

ERROR TypeError: Cannot read property '_elementRef' of undefined
    at DragScrollComponent.push.../../node_modules/ngx-drag-scroll/fesm5/ngx-drag-scroll.js.DragScrollComponent.adjustMarginToLastChild (ngx-drag-scroll.js:1076)
    at DragScrollComponent.push.../../node_modules/ngx-drag-scroll/fesm5/ngx-drag-scroll.js.DragScrollComponent.ngAfterViewInit (ngx-drag-scroll.js:303)
    at callProviderLifecycles (core.js:22416)
    at callElementProvidersLifecycles (core.js:22390)
    at callLifecycleHooksChildrenFirst (core.js:22380)
    at checkAndUpdateView (core.js:23316)
    at callViewAction (core.js:23548)
    at execEmbeddedViewsAction (core.js:23511)
    at checkAndUpdateView (core.js:23308)
    at callViewAction (core.js:23548)
    at execComponentViewsAction (core.js:23490)
    at checkAndUpdateView (core.js:23313)
    at callViewAction (core.js:23548)
    at execEmbeddedViewsAction (core.js:23511)
    at checkAndUpdateView (core.js:23308)

It all comes down to these lines apparently

https://github.com/bfwg/ngx-drag-scroll/blob/357af5d6d2a9d2b8bb38e59949e460f3bc829e11/projects/ngx-drag-scroll/src/lib/ngx-drag-scroll.component.ts#L729-L736

where you are assuming that this._children['_results'] won't ever be an empty array (if I understand the code correctly). I think the else clause is actually never reached: if this._children['_results'].length is not >1, previous assignment will always fail throwing a TypeError.

[bfwg]

Hi @IlCallo , the drag-scroll-item directive is missing in your code example. Can you try the below?

<drag-scroll scrollbar-hidden="true" drag-scroll-y-disabled="true">
    <div drag-scroll-item>
       <ng-container *ngFor="let item of items">
             // Stuff
       </ng-container>
    </div>
  </drag-scroll>

[IlCallo]

Well... It's missing because I'm not using the "carousel" feature 🤔 I want to use it with the "free dragging" experience, like it's written in the README

[bfwg]

hmm, I'm not sure what you mean by free dragging. Can you give me an example of what you are trying to achieve?

[IlCallo]

This: https://github.com/bfwg/ngx-drag-scroll/blob/e4cca35d54ab38c779aa82ba7bef41542c10a709/README.md#L53-L71

I'm not interested in: https://github.com/bfwg/ngx-drag-scroll/blob/e4cca35d54ab38c779aa82ba7bef41542c10a709/README.md#L73

I should also note that, as soon as elements are actually added by the *ngFor, the package works as expected.

[bfwg]

Ok, this is blocking you in any way? If not, I'll try to find time to investigate later this week.

[IlCallo]

No, absolutely, i came back to this because I have a free week and I'm going through all issues I opened last month to help close them, but no hurry

[nemoyans]

I met exactly the same problem...