Angular button needs twice click to work (bug)

I have very simple button

<ion-button (click)="refreshContacts()">    <ion-icon name="refresh-circle-outline"></ion-icon>  </ion-button>  

When I click button it does trigger but doesn't send request to server (how I know it triggers? Well it shows loading modal). But when I click on the button for second time it does send API request to the server

async refreshContacts()  {      //current contacts      this.allContacts = [];        //show loading      this.loading = await this.loadingController.create({        message: 'Loading...',        spinner: 'dots',        duration: 2000      });      await this.loading.present();        // this.contacts = (https://ionicframework.com/docs/native/contacts)      this.contacts.find(['phoneNumbers'], { filter: '', multiple: true, hasPhoneNumber: true }).then(data => {                    // send all founded numbers to server and get results back          this.findUsers.getContacts(data).subscribe((res) => {              for (const contact of res.data) {                  this.allContacts.push(contact); // print back response contacts in HTML list              }                // close loading              this.hideLoading();          });        });  }  

Any idea how to avoid twice click?

https://stackoverflow.com/questions/65867021/angular-button-needs-twice-click-to-work-bug January 24, 2021 at 12:03PM