Why Ionic sometines need a timeout to deal with components

Question

I often need to add a setTimeout to make an instruction run the right way with Ionic.

My config :

Ionic:

   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 template :

<ion-list [formGroup]="formGroup">

    <ion-item *ngIf="countries">

        <ion-label floating>
            {{ 'customer.country' | translate }}
            <span class="required" ion-text color="red">*</span>
        </ion-label>

        <ion-select formControlName="Country">
            <ion-option *ngFor="let c of countries" [value]="c.In">{{c.Out}}</ion-option>
        </ion-select>

    </ion-item>

For example if I try to set a form control value like this, it will not work properly without a setTimeout:

private setFormControlValue(propertyName: string, value: string, stockEmpty?: boolean): void {

    let formControl: AbstractControl = this.formGroup.controls[propertyName];
    if (_.isEmpty(value) && !stockEmpty) {
        return;
    } else {
        if (!_.isEmpty(formControl) && !_.isNil(formControl)) {
            this.logger.trace('Setting value %s for control : ', value, formControl);
            setTimeout(() => formControl.setValue(value), 100);
        }
    }
}

Also happen when I want to resize my content :

ngOnInit(): void {

    setTimeout(() => this.content.resize(), 100);
}

It even works sometimes with a timeout of '0' ms. I would like to avoid using timeout everywhere but I have the impression Ionic needs the instruction to be run in a different 'thread' to be executed the right way.

If someone does encounter the same issue or know a better workaround I would gladly take it.

This on is inside a ngOnInit() method, but I have this issue nearly everywhere inside my code — rguerin, Oct 11 '18 at 12:45
As I said in another comment, my problem is not related with a particular component like the FormGroup. I edited my initial example. — rguerin, Oct 11 '18 at 12:54
Np. It is a weird behavior 'cause I already replicated with the same versions and I could set the value. `setFormControlValue` is called in the `ngOnInit`? `formControl` where is setted ? — Sergio Escudero, Oct 11 '18 at 13:03
Not inside the ngOnInit(), it is triggered by an user action (click on a selected component). I do not show the rest of the code because this method's behaviour should not be impacted by it. — rguerin, Oct 11 '18 at 13:09
Could you please take a look at **[this answer](https://stackoverflow.com/questions/42474414/ionic-2-ionscroll-event-to-not-refresh-view)**? — sebaferreras, Oct 11 '18 at 14:27

score 2 · Accepted Answer · answered Oct 11 '18 at 14:08

2

To my experience, setTimeout would sometimes do the trick regarding to DOM operations and DeviceReady functions. I feel that it's mainly due to Angular's digest-loop performance.

Here's a bit old post of stackoverflow, and it's properly well-written.

Thanks for reading my poor answer.

answered Oct 11 '18 at 14:08

SuperStar518

2,814
2
20
35

It is exactly the same behaviour, I will go on with it. Thank you so much, very interesting reading. – rguerin Oct 11 '18 at 14:12

score 1 · Answer 2 · answered Oct 11 '18 at 12:37

1

Did you try:

this.formGroup.get('Country').setValue('toto');

Works for me instant

answered Oct 11 '18 at 12:37

Danel Ceresa

340
2
17

Thank you for your answer but my problem is a bit more generic. I made the example with a formGroup but it also happens with other components. I updated my first post. – rguerin Oct 11 '18 at 12:49

Why Ionic sometines need a timeout to deal with components

2 Answers2