`scrollTabs` issue in latest ionic 3.2.0 release about ionic-super-tabs

[darron1217]

I found the code change from Ionic 3.2.0 release.
ionic-team/ionic-framework@5d56216#diff-c7183d7ba6fabfec3a2be33bf4b070f8

This problem is caused by the change of src/components/segment/segment-button.ts file.
The code

constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}

Changed to

constructor() {}

So now super-tabs cannot find variable _elementRef from SegmentButton

  private indexSegmentButtonWidths() {
    let index = [], total = 0;

    this.segmentButtons.forEach((btn: SegmentButton, i: number) => {
      // Cannot read property 'nativeElement' of undefined 
      index[i] = <ElementRef>(<any>btn)._elementRef.nativeElement.offsetWidth;
      total += index[i] + 10;
    });

    this.segmentButtonWidths = index;
    this.segmentWidth = total;
  }

So.. @ihadeed we should figure out the way to get _elementRef by fixing the code below.

@ViewChildren(SegmentButton)
private segmentButtons: QueryList<SegmentButton>;

[ihadeed]

Working on a fix now. Getting rid of ion-segment completely and building a custom component from scratch. A step closer to making this plugin less "hacky" ...

[ihadeed]

Fixed in [email protected].

[mforloni]

I have the same problem. The scrollTabs not work in this new version.

[mumairofficial]

@ihadeed It is fixed basically version was not updated in my package.json which is 2.6.1 not 2.6.0, so ionic embed older code while packaging.

DON'T forget to add --save flag while updating

npm install --save ionic2-super-tabs@latest

Thank you for hard work to make this functionality work 👍

[squallliu]

@ViewChildren(SegmentButton, { read: ElementRef })
private segmentButtons: QueryList<ElementRef>;

this.segmentButtons.forEach((btn: ElementRef, i: number) => {
      index[i] = btn.nativeElement.offsetWidth;
      total += index[i] + 10;
});

[hayuki]

@ihadeed Cannot update to 2.6.0, getting the following error:

pm ERR! notarget No compatible version found: [email protected]
npm ERR! notarget Valid install targets:
npm ERR! notarget 0.1.0, 0.2.0, 1.0.0, 1.1.0, 1.1.1, 2.0.0-alpha.1, 2.0.0-alpha.2, 2.0.0-beta.1, 2.0.0, 2.1.0, 2.2.0, 2.2.2, 2.3.0, 2.3.1, 2.3.2, 2.3.3, 2.4.1, 2.4.2, 2.5.0, 2.5.1, 2.5.2
npm ERR! notarget

Could you perhaps have forgotten to publish the new tag on npm?..

[ihadeed]

@hayuki looks like a valid tag to me... try clearing your NPM cache by running npm cache clear

[mumairofficial]

@ihadeed I have tried to install 2.6.0 it seems like installed but after clearing npm cache.
I checked the version which is same as before; also problem persist: