HI WELCOME TO Sirees

Ionic 4 – Radio Button Tutorial

Leave a Comment

 

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);
}
}

Result


0 comments:

Post a Comment

Note: only a member of this blog may post a comment.