Ionic 2 Add radio buttons to alert controller

Question

How to add radio buttons as inputs buttons in an alert controller in ionic 2? It works with check boxes, but i want to add radio button group with radio buttons to select only one option.

  advanceSearch(): void{
   let prompt = this.alertCtrl.create({
    title: 'something',
    message: 'Select option ',
    inputs : [
     {
       type:'checkbox',
       label:'something1'
     },
     {
       type:'checkbox',
       label:'something2'
      }

    ],
    buttons : [
     {
       text: "Cancel",
       handler: data => {
         console.log("cancel clicked");
       }
     },
     {
       text: "Search",
       handler: data => {
         console.log("search clicked");
       }
     }
    ]
    });
    prompt.present();
}

`

I want to change these check boxes to radio boxes.

Lunik

Answer 1

Try this.

advanceSearch(): void
{
    let prompt = this.alertCtrl.create({
    title: 'something',
    message: 'Select option ',
    inputs : [
    {
        type:'radio',
        label:'something1',
        value:'something1'
    },
    {
        type:'radio',
        label:'something2',
        value:'something2'
    }],
    buttons : [
    {
        text: "Cancel",
        handler: data => {
        console.log("cancel clicked");
        }
    },
    {
        text: "Search",
        handler: data => {
        console.log("search clicked");
        }
    }]});
    prompt.present();
}

Sirotek

Thank You @Dinuka – Lunik

is it possible to set Boolean to value of a button – Wendalyn

Answer 2

Please be aware that cuttenly AlertController.create method returns Promise<HTMLIonAlertElement> so you have to create it using async / await:

async advanceSearch(): void
{
  let prompt = await this.alertCtrl.create({
    title: 'something',
    message: 'Select option ',
    inputs : [
    {
        type:'radio',
        label:'something1',
        value:'something1'
    },
    {
        type:'radio',
        label:'something2',
        value:'something2'
    }],
    buttons : [
    {
        text: "Cancel",
        handler: data => {
        console.log("cancel clicked");
        }
    },
    {
        text: "Search",
        handler: data => {
        console.log("search clicked");
        }
    }]});

   await prompt.present();
}

Operation