Updating the data to the *ngFor object the view is flickering

Hi everyone

I’m updating the data to the object that the view is rendering , In android it is working fine but in IOS entire view is reloading like (it is flickering ) .below are projects files .

example code:
1. Html file: tab1.page.html

<ion-content class="bodyStyle">
  <!-- <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
    <ion-refresher-content pullingIcon="" pullingText="" refreshingSpinner="circles" refreshingText="">
    </ion-refresher-content>
  </ion-refresher> -->
  <div class="completegrid">
    <ion-grid class="dashgrid" *ngIf="roomApp != 0">
      <div class="col-12">
        <div class="row">
          <div *ngFor="let item of roomApp">
            <div class="box" style="width:155px;" [ngClass]="{
                  'redBorder':item.current_status == 0,
                  'greenBorder':item.current_status == 1,
                  'amberBorder':item.current_status == 2
                }">
              <!-- <div class="d-flex align-items-center justify-content-between"> -->
              <!-- <div>
                  <ion-icon (click)="editName(item.appliance_id);" name="refresh-circle"></ion-icon>
                </div> -->
              <div class="text-right">
                <ion-icon (click)="editName(item.id,item.custom_appliance_name);" name="create"></ion-icon>
              </div>
              <!-- </div> -->
              <p *ngIf="!item.custom_appliance_name" class='data font12 hometitle'>{{item.appliance_name}}</p>
              <p *ngIf="item.custom_appliance_name" class='data font12 hometitle'>{{item.custom_appliance_name}}</p>
              <img src="{{item.off_icon}}" *ngIf="item.current_status == 0" alt="" class="cardimg" />
              <img src="{{item.on_icon}}" *ngIf="item.current_status == 1" alt="" class="cardimg" />
              <img src="{{item.off_icon}}" *ngIf="item.current_status == 2" alt="" class="cardimg" />
              <div class="d-flex justify-content-between">
                <div *ngIf="item.current_status == 1 || item.current_status == 0">
                  <ion-toggle color="primary" style="padding-bottom: 4px;"
                    (click)="checkStatus(item.id,item.current_status)"
                    [checked]="item.current_status == 1 ? 'true' : 'false'"></ion-toggle>
                  <div *ngIf="item.current_status == 1" class="font10">On</div>
                  <div *ngIf="item.current_status == 0" class="font10">Off</div>
                </div>
                <div *ngIf="item.current_status == 2" class="d-flex align-items-center">
                  <div *ngIf="item.current_status == 2" class="font10 p-2"
                    style="background-color:red; color:#fff;border-radius:6px;">FAULTY</div>
                </div>
                <div>
                  <ion-toggle class="custom-toggle" (click)="checkNotification(item.id,item.notification_status)"
                    [checked]="item.notification_status == 1 ? 'true' : 'false'" style="padding-bottom: 4px;">
                  </ion-toggle>
                  <div class="font10">Notification</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </ion-grid>
    <ion-grid *ngIf="roomApp== 0" class="d-flex justify-content-center align-items-center red">
      No Appliances found
    </ion-grid>
  </div>
</ion-content>

2. TS file: tab1.page.ts

doRefresh() {
this.apiService.rooms(this.uid).subscribe(response => {
if (!response[‘error’]) {
localStorage.setItem(“appliances”, JSON.stringify(response[‘appliances’]));
this.allAppliance = response[‘appliances’];
this.roomApp = this.allAppliance[this.room_id];
}
else {
this.resError = response[‘error’];
}
},
(err) => {
console.log("error==> ", err);
if (err[‘status’] == 401) {
this.navController.navigateForward(’/login’);
localStorage.setItem(‘loginValue’, ‘logout’);
}
})
}

3. scss file: tab1.page.scss

ion-content ion-toolbar {
–background: transparent;
}
.box {
box-shadow: 0 2px 4px rgba(var(–ion-color-dark-rgb), 0.24);
margin: 10px;
text-align: center;
padding: 6px;
min-height: 190px;
}
.cardimg {
width: 84px;
height: 84px;
}
.data {
margin: 0;
}
.font12{
font-size:12px;
}
.font10{
font-size:10px;
}
.red{
color:gray;
height: 100vh;
}
.greenBorder{
border-bottom:4px solid green;
}
.redBorder{
border-bottom:4px solid gray;
}
.amberBorder{
border-bottom:4px solid red;
}
.loading{
background-color:transparent !important;
}

Package.json

{
  "name": "vidut",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "@ionic-native/core": "^5.31.1",
    "@ionic-native/device": "^5.31.1",
    "@ionic-native/fcm": "^5.31.1",
    "@ionic-native/keyboard": "^5.31.1",
    "@ionic-native/local-notifications": "^5.31.1",
    "@ionic-native/preview-any-file": "^5.31.1",
    "@ionic-native/screen-orientation": "^5.31.1",
    "@ionic-native/splash-screen": "^5.31.1",
    "@ionic-native/status-bar": "^5.31.1",
    "@ionic/angular": "^5.5.4",
    "bootstrap": "^4.4.1",
    "cordova-browser": "6.0.0",
    "cordova-ios": "6.2.0",
    "cordova-plugin-screen-orientation": "^3.0.2",
    "core-js": "^2.5.4",
    "es6-promise-plugin": "^4.2.2",
    "highcharts": "^8.1.0",
    "highcharts-angular": "^2.4.0",
    "rxjs": "~6.5.1",
    "tslib": "^1.9.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.803.29",
    "@angular/cli": "~8.3.23",
    "@angular/compiler": "~8.2.14",
    "@angular/compiler-cli": "~8.2.14",
    "@angular/language-service": "~8.2.14",
    "@ionic/angular-toolkit": "^2.1.1",
    "@ionic/lab": "3.2.10",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "^5.0.0",
    "cordova-android": "^9.0.0",
    "cordova-plugin-badge": "^0.8.8",
    "cordova-plugin-device": "^2.0.3",
    "cordova-plugin-fcm-with-dependecy-updated": "^7.8.0",
    "cordova-plugin-ionic-keyboard": "^2.2.0",
    "cordova-plugin-ionic-webview": "^5.0.0",
    "cordova-plugin-local-notification": "^0.9.0-beta.2",
    "cordova-plugin-preview-any-file": "^0.2.3",
    "cordova-plugin-splashscreen": "^6.0.0",
    "cordova-plugin-statusbar": "^2.4.3",
    "cordova-plugin-whitelist": "^1.3.4",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.4.3"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-whitelist": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-ionic-keyboard": {},
      "cordova-plugin-screen-orientation": {},
      "cordova-plugin-preview-any-file": {},
      "cordova-plugin-local-notification": {},
      "cordova-plugin-fcm-with-dependecy-updated": {
        "IOS_FIREBASE_MESSAGING_VERSION": "~> 7.4.0"
      },
      "cordova-plugin-ionic-webview": {}
    },
    "platforms": [
      "android",
      "browser",
      "ios"
    ]
  }
}

In Android it is working fine without flickering below you can see Gif.


In IOS it is not working ,it is flickering

As you can see from IOS gif ,images are flickering.

can anyone help me from this issue

Hi. Some thoughts

Simplify the template with less ngIfs. I think the template may get performance struggles this way. Some things you can simplify by enriching the data of each item.

And maybe first and foremost, change the way you populate the array when you refresh. What u do now is a full replace which causes a rerender. Make better to replace items within the existing array.

Especially when nothing has changed, dont replace data so the change detector of angular does not need to trigger and do work

I cant explain th difference between ios and android. Could be performance difference of the hardware

Hi there

Thanks for you reply , I tried but even though that flickering is happening