CODEWITHSUNDEEP
angularionic-framework
RRGT19
RRGT19

Reputation: 1677

Set checked radio button in a radio group programmatically in Ionic 5 with Angular 9

I'm doing an application in Ionic 5 and Angular 9.

I have a radio-group with options that I fetch with an HTTP request, and I want to set one of them as selected programatically.

Component:

  options: {id: string, description: string}[] = [];
  optionSelected = null;

  constructor(
    private service: MyService,
  ) {
  }

  ngOnInit() {
    this.service.getOptions()
      .pipe(first())
      .subscribe(res => {
        this.options = res;

        // Setting the option selected by default.
        this.optionSelected = {id:"001", description:'This is selected by default'};
      });
  }

  trackById(index: number, option: any): string {
    return option.id;
  }

Template:

<ion-list>

    <ion-radio-group (ionChange)="optionSelected = $event.target.value" [(ngModel)]="optionSelected">

      <ion-item *ngFor="let a of options; trackBy: trackById">
        <ion-radio slot="start" [value]="a"></ion-radio>
        <ion-label class="ion-text-wrap"><h3>{{a.description}}</h3></ion-label>
      </ion-item>

    </ion-radio-group>

  </ion-list>

When I fetched the data, I assign the object that I want to be selected, but, it's not selected in the radio-group.

My goal is to check a radio button in the radio-group programmatically when I fetch the data.

Upvotes: 2

Views: 5745

Answers (1)

nevzatopcu
nevzatopcu

Reputation: 1085

Object comparison is different than comparison on other types.

Example:

  1. String and string comparison:

    console.log("a" === "a"); // true

  2. Object and object comparison;

    console.log({a:1,b:2,c:3} === {a:1, b:2, c:3}); // false

,so I think your mistake is binding an object as a value of option. Because, when it compares the objects with === operator, it returns false.

To solve the issue:

You need to bind the id of your entity.

Template: 

<ion-radio-group [(ngModel)]="optionSelected">

  <ion-item *ngFor="let a of options; trackBy: trackById">
    <ion-radio slot="start" [value]="a.id"></ion-radio>
    <ion-label class="ion-text-wrap"><h3>{{a.description}}</h3></ion-label>
  </ion-item>

</ion-radio-group>

Component:

  ngOnInit() {
    this.service.getOptions()
      .pipe(first())
      .subscribe(res => {
        this.options = res;

        // Setting the option selected by default.
        this.optionSelected = res[0].id; // example
      });
     }

And you don't need (ionChange) function because [(ngModel)] is two way binding, so when it changes, your variable is also changing. If anyway you need to do something when it changes, you can use ngModelChange event like following:

<ion-radio-group (ngModelChange)="changed()" [(ngModel)]="optionSelected">
</ion-radio-group>

Finally, you will get an id of selected option at optionSelected variable. If you need to find the option entity completely:

const selectedOption = this.options.find(opt => opt.id === optionSelected);

Upvotes: 4

Related Questions