Ionic 4 – Radio Button Tutorial

 

home.page.html

<ion-header>

<ion-toolbar>

<ion-title>

Radio Button Tutorial

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-list>

<ion-radio-group allow-empty-selection="true" (ionChange)="fishyHandler($event)" (ionSelect)="goFish($event)"

(ionBlur)="leaveFish($event)">

<ion-list-header>

<ion-label>{{fish}}</ion-label>

</ion-list-header>

<ion-item>

<ion-label>Sardine</ion-label>

<ion-radio slot="start" value="sardine" checked></ion-radio>

</ion-item>

<ion-item>

<ion-label>Anchovy</ion-label>

<ion-radio slot="start" value="anchovy"></ion-radio>

</ion-item>

<ion-item>

<ion-label>Mackerel</ion-label>

<ion-radio slot="start" value="mackerel"></ion-radio>

</ion-item>

</ion-radio-group>

</ion-list>

</ion-content>

Result

home.page.ts

import { Component } from '@angular/core';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss']

})

export class HomePage {

public fish: string;

constructor() {}

fishyHandler(event) {

// get data throught event emitter

this.fish = event.target.value;

}

leaveFish(event) {

console.log('bye bye ', event.target.value);

}

goFish(event) {

console.log('hello ', event.target.value);

}

}