How to make the first ionic radio button pre-selected in angular

Question

I need help with pre-selecting the first radio button from a generated list of radio buttons that can be changed if user selects a different radio btn...

My attempt is returning me this error: TypeError: Cannot read properties of undefined (reading '0')

delivery-dates.model.ts

export interface DeliveryDates {
  color: string;
  date: string;
  date_name: string;
}

cart.page.ts code:

export class CartPage implements OnInit, OnDestroy {
  dates: DeliveryDates[];
  selectedValue: any;
  private datesSubscription: Subscription;

  constructor() {
  }

  ngOnInit() {
    this.getDeliveryDates();
    this.selectedValue = this.dates[0].date;
  }

  getDeliveryDates() {
    this.datesSubscription =
      this.cartService.getDeliveryDates().subscribe(
        data => {
          this.dates = data;
        },
        error => {
          console.log('Error', error);
        });
  }
}

cart.page.html

<ion-list class="dates-list">
  <ion-radio-group value="{{dates[0]}}"  [(ngModel)]="selectedValue">
    <ion-item *ngFor="let datum of dates;let i = index" (click)="modal.dismiss()">
      <ion-icon name="today-outline"></ion-icon>
      <ion-label class="{{datum.color}}">{{datum.date_name}} {{ datum.date }}</ion-label>
      <ion-radio slot="end" value="{{ datum.date }}"></ion-radio>
    </ion-item>
  </ion-radio-group>
</ion-list>

`dates: DeliveryDates[];` where do you actually assign a value. — , Mar 06 '23 at 18:48
@E.Maggini So I get the dates through an API service... I have updated my code — weinde, Mar 07 '23 at 06:48
In the future, please post complete reproducible examples., not code fragments. You would have gotten an answer yesterday. Your issue is your call to get data is async. And it is a duplicate question on Stackoverflow as this first search result shows. https://www.google.com/search?q=ngonInit+async+data+call — , Mar 07 '23 at 10:18
@E.Maggini sorry. How can I rewrite it to not be async? Is there a better way to get my data and set the first radio button to be selected? — weinde, Mar 07 '23 at 11:24
You don't re-write to not be async. You re-write to properly handle async. https://stackoverflow.com/questions/56092083/async-await-in-angular-ngoninit — , Mar 07 '23 at 12:13

score 0 · Answer 1 · answered Mar 11 '23 at 15:24

Why can't you try this code?? You are trying to set value at startup. But the value assigned before fetching the values.

export class CartPage implements OnInit, OnDestroy {
  dates: DeliveryDates[];
  selectedValue: any;
  private datesSubscription: Subscription;

  constructor() {
  }

  ngOnInit() {
    this.getDeliveryDates();

  }

  getDeliveryDates() {
    this.datesSubscription =
      this.cartService.getDeliveryDates().subscribe(
        data => {
          this.dates = data;
          (this.dates.length>0)?this.selectedValue = this.dates[0].date:false;
        },
        error => {
          console.log('Error', error);
        });
  }
}

How to make the first ionic radio button pre-selected in angular

1 Answers1