Ngx-drag-scroll: Starting ngx-drag-scroll from specified index

Created on 21 Oct 2018 · 7Comments · Source: bfwg/ngx-drag-scroll

I'm submitting a ...
- [ ] bug report
- [x] feature request
- [ ] support request => Please do not submit support request here, see note at the top of this template.
Do you want to request a feature or report a bug?

Is it possible to start the dragscroll from other index than 0?

What is the current behavior?
Right now, the dragscroll is starting from the very first image/component by default.
What is the motivation / use case for changing the behavior?
It would be nice to choose the index where to start the dragscroll (on load).

feature request

Source

Andi1990

Most helpful comment

You can actually achieve setting the initial index by calling moveTo in `ngAfterViewInit block. Make sure to wrap the call with setTimeout(() => {...}, 0);
For example:

  @ViewChild('nav', {read: DragScrollComponent}) ds: DragScrollComponent;
  ngAfterViewInit() {
    setTimeout(() => {
      this.ds.moveTo(3);
    }, 0);
  }

bfwg on 23 Oct 2018

👍2

All 7 comments

You can actually achieve setting the initial index by calling moveTo in `ngAfterViewInit block. Make sure to wrap the call with setTimeout(() => {...}, 0);
For example:

  @ViewChild('nav', {read: DragScrollComponent}) ds: DragScrollComponent;
  ngAfterViewInit() {
    setTimeout(() => {
      this.ds.moveTo(3);
    }, 0);
  }

bfwg on 23 Oct 2018

👍2

already tried.., unfortunately I get this error every time:

core.js:1673 ERROR TypeError: Cannot read property '_elementRef' of undefined at DragScrollComponent.push../node_modules/ngx-drag-scroll/lib/ngx-drag-scroll.js.DragScrollComponent.maximumIndex (ngx-drag-scroll.js:415) at DragScrollComponent.push../node_modules/ngx-drag-scroll/lib/ngx-drag-scroll.js.DragScrollComponent.moveTo (ngx-drag-scroll.js:214) at myComponent.component.ts:141 at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Object.onInvokeTask (core.js:3815) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188) at push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask (zone.js:496) at ZoneTask.invoke (zone.js:485) at timer (zone.js:2054)

Andi1990 on 27 Oct 2018

Are you calling moveTo within ngAfterViewInit block? The moveTo method can be called when the drag scroll carousel element is visible on the page.
Or you can add a little delay and try again like:

    setTimeout(() => {
      this.ds.moveTo(3);
    }, 1000);

let me know if that works.

bfwg on 27 Oct 2018

I did. But with timeout of 1s now it works! Thanks for the help, although it's a bit hacky.

Andi1990 on 27 Oct 2018

👍1

Hmm, without looking at the code I can't figure out why ngAfterViewInit doesn't work for you. I would say use the setTimeout for now until this feature is out. A PR is more than welcome.

bfwg on 28 Oct 2018

👍1

You can actually achieve setting the initial index by calling moveTo in `ngAfterViewInit block. Make sure to wrap the call with setTimeout(() => {...}, 0);
For example:
  @ViewChild('nav', {read: DragScrollComponent}) ds: DragScrollComponent;
  ngAfterViewInit() {
    setTimeout(() => {
      this.ds.moveTo(3);
    }, 0);
  }

Hi please add this feature in the documentation.

davidjm-taximo on 22 Mar 2019

👍1

if I use this solution, the user will see the animation with the first item move to the specific item.
I would suggest below. Do you think if it is ok?

ngAfterViewInit(){
  setTimeout(()=>{
    this.ds.currIndex = 3;
    this.ds._elementRef.nativeElement.children[0].scrollLeft = someValue;
  }, 10);
}