How to select one of multiple API's using radio buttons

#1

So have to choose 1 of 2 urls (json strings) and select them using radio buttons.

url 1: https://newsapi.org/s/aftenposten-api

url 2: https://newsapi.org/s/bild-api

I’m looking for information on this but can’t find any anywhere.

I’m presuming there is a way to do it with an array but haven’t found anything anywhere.

Regards

#2

Take a look a tutorial about working with forms in Angular and you should able to solve your problem.

#3

Hi Chris, thanks for your reply. I’ve watched a few tutorials on forms in Angular but none have been of any help for this issue.

#4

The HTML

<ion-content padding>

  <ion-list>
    <ion-radio-group>
      <ion-list-header>
        <ion-label>Sources</ion-label>
      </ion-list-header>
  
      <ion-item>
        <ion-label>{{dataSource[0]}}</ion-label>
        <ion-radio slot="start" value="{{dataSource[0]}}" checked (ionSelect)="handleChoice('0')" ></ion-radio>
      </ion-item>
  
      <ion-item>
        <ion-label>{{dataSource[1]}}</ion-label>
        <ion-radio slot="start" value="{{dataSource[1]}}" (ionSelect)="handleChoice('1')" ></ion-radio>
      </ion-item>
  
    </ion-radio-group>
  </ion-list>

</ion-content>

The TypeScript:

export class HomePage {
  private dataSource: Array<String> = ['https://newsapi.org/s/aftenposten-api', ' https://newsapi.org/s/bild-api'];
  constructor() { }

  handleChoice(val) {
    console.log(val);
  }
}

I would take a better look at reactive forms in Angular as they will be very useful in actual development.

Chris
author, ionic-book.com

#5

Hi Chris,

Thank you some much for that.