Issue with ion-radio-group with ngModel

Question

I am using ion-radio-group with ngModel with hide/show functionality. Below is my UI code for view.

<ion-button (click)="showSection()" size="small" >show</ion-button>
<ion-button (click)="hideSection()" size="small" >Hide</ion-button>

<ion-list style="margin-bottom: 0px;" *ngIf="show">
  <ion-radio-group [(ngModel)]="payment.paytype">
    <ion-list-header>
      Select Payment Method
    </ion-list-header>

<ion-item>
  <ion-label>Online</ion-label>
  <ion-radio value="online"></ion-radio>
</ion-item>

   <ion-item>
      <ion-label>Token</ion-label>
      <ion-radio value="token"></ion-radio>
    </ion-item>
 </ion-radio-group>
</ion-list>

This is my hide/show code on controller.

show:boolean;payment={}

showSection()
{
    this.show = true;
}
hideSection()
{
    this.show = false;
}

Issue came when I select radio and performing hide show operation. My UI get freezes. I am using Ionic 4.

Note: if I am not selecting radio and doing hide/show no issue is coming. Issue is coming only when I selected the radio and then hide/show.

Answer 1

Usually the UI freezes when there's an infinite loop. especially in 2 way binding, you might encounter those kind of issues. Try to wrap the ion-list in a div and add the ngIf on the div. and why are you using async function? it's not necessary.