how to show the radio button checked

Question

I have to show my radio group in checked based upon the response from backed. below html code is in my side menus

here is my code:

 <ion-list radio-group [(ngModel)]="selectedLanguage"  class="list-space">

            <ion-item *ngFor="let language of languageArray; let val = index" class="radio" > 
              <ion-label menuClose>{{language.local}}</ion-label>
              <ion-radio item-left checked={{languageChoosen}} [value]="language" menuClose  (click)="doSomething(language)"></ion-radio> 
            </ion-item>

          </ion-list>

As you can see i have given checked={{languageChoosen}} is a variable from .ts file .

i am able to show the selected radio option at the very first time of my app open if the user changes anything then after that i am not able to show the selected radio option.

UPDATE

doSomething(event){ 
    console.log("invoking dosomething fun");
    console.log("checking event params "+event);

    let languageObj

    if(event){
      languageObj = {
        lang_id: event.lang_id
      }

      console.log("cheking languageObj " + JSON.stringify(languageObj));
      // this.holders.presentLoadingCustom();

      this.rest.post('/language',languageObj)
      .subscribe((result)=>{;
        // this.holders.dissmissLoadingCustom()
        console.log("checking data of success " +JSON.stringify(result));
        if(result.status == '1'){
          this.logger.debug("checking "+this.selectedLanguage);
          this.selectedLanguage = '';
          this.toggleLanguages();
          for(var i = 0; i < this.languageArray.length; i++){
            if(languageObj.lang_id == this.languageArray[i].lang_id){
              this.languageChoosen = this.languageArray[i].local;
            }
          }
          this.checkLanguageReq();
        }
        else{
          console.log("error");
        }
      });

    }
    else{
      console.log("error of languages automatic call");
    }

  }

Answer 1

you can do like this in your HTML do like this

<input #ansa (click)="updateAnwer(ansa.value)" value="A" type="radio" id="quesA" name="ques">
<input #ansb (click)="updateAnwer(ansb.value)" value="B" type="radio" id="quesB" name="ques"> 

in above code, I have assigned an id to input whenever the user changes something then I am calling one function and finding the selected input ID and applying true to checked attribute as follows and its working fine for me

uncheckedR(value){                                                 
   if(value == 'A'){
      (<HTMLInputElement>document.getElementById('quesA')).checked = true;
    }else if(value == 'B'){
      (<HTMLInputElement>document.getElementById('quesB')).checked = true;
    }else{
      (<HTMLInputElement>document.getElementById('quesA')).checked = false;
      (<HTMLInputElement>document.getElementById('quesB')).checked = false;
   }
}

call this function where you want to keep radio to be checked

Answer 2

It works fine for me......

function checkedRdButton(value)
{
   if(value=="A")
    {
      $("#rdtab0").prop('checked', true);
    }
   else
   {
      $("#rdtab1").prop('checked', true);
   }
}

Answer 3

You don't need to use the checked property (checked={{languageChoosen}}) because the radio option will be selected with the [(ngModel)]="selectedLanguage". So the only thing you need to do, is to initialize the selectedLanguage property with the language object (since the value of each radio item is an object: [value]="language").

Also notice that you can avoid using the menuClose attribute in your html code, and use the this.menuCtrl.close(); method from your ts code when an option is selected:

constructor(private menuCtrl: MenuController) {
    // ...
}

public doSomething(language: any): void {
    // First close the menu
    this.menuCtrl.close();

    //...
}