Xtykutl

I'm using the Ionic ion-slides component to display a SKU carousel. The current SKU must be selected among a SKU list.

The thing is the Ionic Slides does not appear to be ready immediately, even called inside the Angular ngAfterViewInit hook. I have to use a timeout first.

My config info :

   ionic (Ionic CLI)  : 4.0.1 (/Users/rguerin/.nvm/versions/node/v6.10.1/lib/node_modules/ionic)

   Ionic Framework    : ionic-angular 3.1.1

   @ionic/app-scripts : 1.3.7



System:



   NodeJS : v6.10.1 (/Users/rguerin/.nvm/versions/node/v6.10.1/bin/node)

   npm    : 3.10.10

   OS     : macOS High Sierra

My component file :

import { Component, OnInit, ViewChild, Input, Output, EventEmitter, AfterViewInit } from '@angular/core';

import { Logger, AppConfig } from '@instoreapps/core/dist';

import { Slides } from 'ionic-angular';



import { SkuResult } from '../../models/item.model';



import * as _ from 'lodash';





/**

 * Angular component to show size variation (or capacity in ml) of one product in carousel.

 * @implements OnInit

 */

@Component({

    selector: 'isa-item-size',

    templateUrl: './item-size.component.html',

    providers: [

        { provide: Logger, useFactory: (config: AppConfig) => new Logger(config, 'item size'), deps: [AppConfig] }

    ]

})

export class ItemSize implements OnInit, AfterViewInit {



    @ViewChild(Slides) public containersSlides: Slides;



    @Input() public defaultSkuIndex: number;

    @Input() private skuList: SkuResult;

    @Output() private containerSelected: EventEmitter<any> = new EventEmitter();



    /**

     * Index of the selected container.

     * Serve to apply specific css style 

     * on selected container. 

     */

    private selectedIndex: number = 0;



    constructor(private logger: Logger) { }



    /**

     * Select default sku available and emit 

     * event to parent component to select it inside the carousel

     */

    ngAfterViewInit(): void {



        this.logger.trace('Entering ngAfterViewInit method', this.selectedIndex, this.defaultSkuIndex);



        setTimeout(() => {

            this.selectContainer(this.defaultSkuIndex);

        }, 300);

    }



    /**

     * Event triggered after the slide change is done

     */

    public onSlideDidChange(event: any): void {

        this.containerSelected.emit(this.defaultSkuIndex);

        this.selectedIndex = this.defaultSkuIndex;

    }



    /**

     * Function to use from parent component @see {ItemDetails}

     * to set selected container and make carousel slide to it.

     * @param {number} index of sku.

     */

    selectContainer(index: number): void {



        this.logger.trace('Entering selectContainer method with index : ', index, this.selectedIndex);



        if (index !== this.selectedIndex) {



            this.selectedIndex = index;

            this.containersSlides.slideTo(_.floor(index / 2));

        }

    }

}

My HTML file :

<ion-list id="items-colors">



    <ion-list-header id="items-colors-header">

        {{ 'items.availableColors' | translate }}

    </ion-list-header>



    <ion-item>

        <ion-slides id="item-colors" (ionSlideDidChange)="onSlideDidChange($event)">

            <ion-slide *ngFor="let item of skuList; let i = index">

                ...

            </ion-slide>

        </ion-slides>

    </ion-item>

</ion-list>

I'd like to suppress the timeout and call the selectContainer method directly, but when I do I have the following error :

undefined is not an object (evaluating 's._snapGrid.length')"

Does anyone know a workaround ?