CODEWITHSUNDEEP
angularionic-framework
CodeAssasins
CodeAssasins

Reputation: 237

ionic alertcontroller blocking page refresh

I'm new to Ionic-Angular. The thing is I've a matautocomplete along with icon. When you select a value in matautocomplete, a list is shown below. On icon click I'm showing ionic alertcontroller and on selecting ok, setting the value of matautocomplete programmatically. Though value is getting set in matautocomplete but list is not refreshing. Then when I again click on icon or change window even, the list refreshes.

async showBranches() {
    // this.autocomplete.closePanel();
    const alert = await this.alertController.create({
      header: 'Branch Locations',
      inputs: this.branchArray,
      buttons: [
        {
          text: "CANCEL",
          handler: data => {
            console.log("cancel clicked");
          }
        },
        {
          text: "OK",
          handler: data => {
            console.log("branchId: " + data);
            this.branchID = data;
            this.setBlankOrSelectedBranch();
            
          }
        }],
      cssClass: 'alertCustomCss'
    });
    await alert.present();
  }
<div class="col90">
              <mat-form-field class="fullWidth">
                <input type="text" placeholder="Select Branch Location" matInput [formControl]="myBranch"
                  [matAutocomplete]="auto">
                <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn" (optionSelected)='onBranchSelected($event.option.value)'>
                  <mat-option *ngFor="let branch of filteredBranches | async" [value]="branch">
                    {{branch.branchName}}
                  </mat-option>
                </mat-autocomplete>
              </mat-form-field>
              <ion-icon name="finger-print" matSuffix class="thumb" (click)="showBranches()"></ion-icon>
            </div>

Upvotes: 0

Views: 325

Answers (1)

Weichen Lu
Weichen Lu

Reputation: 26

Asynchronous operations may not trigger Angular to re-render the view, you can try to manually notify Angular to re-render

import { NgZone } from '@angular/core';

constructor(public _ngZone:NgZone){}

public refresh() {
  this._ngZone.run(() => {});
}

Upvotes: 1

Related Questions