ionic4 flickering and performance issue on *ngIf

Bug Report

Ionic version: [x] 4.x

Current behavior: On ionic4 we see many times performance issues and flickering on adding and removing ionic components from dom.

If we have for example something like that

           <div *ngIf="this.loginSerivce.step === 2">YES</div>
            <ion-chip *ngIf="this.loginSerivce.step === 2" (click)="backToChooseGW()">
                <ion-icon name="arrow-back"></ion-icon>
                <ion-label>{{ selectedGW?.description }}, {{ selectedGW?.serialNumber }}</ion-label>
            </ion-chip>

as you can see there are a div (only for test) and an ion-chip which should render at the same time. If we do exactly the same thing on ionic3 and performe a performance registration with chrome we can see both elements are rendered in exactly the same frame, if we do this in ionic4 we can see some flickering for the ioni-chip and on the performance test the div element is rendered much faster then the ion-chip element.

So if you have many elements on the screen and update a list or others there are a lot of flickering, on ionic3 all this things looks much much much smoother

Same problem with a ion-list with 2 elements, if we update the element it looks really bad, absolutly no problem and very smooth on ionic3

Ionic info:

Ionic:
   ionic (Ionic CLI)             : 4.10.3 (/usr/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.1.1
   @angular-devkit/build-angular : 0.13.5
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.5
   @ionic/angular-toolkit        : 1.4.0

Cordova:
   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : not available
   Cordova Plugins       : not available

System:
   Android SDK Tools : 26.1.1 (/home/...../software/android/sdk)
   NodeJS            : v10.15.2 (/usr/bin/node)
   npm               : 6.8.0
   OS                : Linux 4.15

[alainbelez]

@mburger81 checked the repo and adding a trackBy in ngFor seems to fix your problem, i think it happens because angular is recreating the ion-item every time.

//view
    <ion-item *ngFor="let gw of gws; trackBy: trackByFn" button>
        <ion-avatar slot="start">
            <img src="assets/img/lanthings-hdpi-icon.png">
        </ion-avatar>
        <ion-label>
            <h2>{{ gw.description }}</h2>
            <p>{{ gw.serialNumber }}</p>
        </ion-label>
    </ion-item>

//controller
  trackByFn(index: number, item: any): number {
    return item.serialNumber;
  }

[mburger81]

We have the problem on DEV with latest chrome, so the problem should not be only on slow old devices.