_angular-radio-buttons-get-selected-value.md

Code Examples for my Blog Post: How do I get the value of the selected radio button with Angular?

The full Github repo can be found here: github.com/kevinchisholm/video-code-examples/tree/master/angular/templates-and-data/radio-buttons-get-selected-value

home.component.ts

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

@Component({
  selector: 'home',
  templateUrl: 'src/home/home.html',
  styleUrls:  ['src/home/home.css']
})

export class HomeComponent {
  selectedDay: string = '';
  days: any = [
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday'
  ];

  //event handler for the radio button's change event
  radioChangeHandler (event: any) {
    //update the ui
    this.selectedDay = event.target.value;
  }
}

home.html

<article>
    <h1>Angular Get Radio Button Selected Value</h1>
    <h2><span>Select a day:</span></h2>

    <!-- for each day in the days array -->
    <div *ngFor="let day of days">
        <!-- create a radio button-->
        <input
        type="radio"
        name="dayOfTheWeek"
        value="{{day}}"
        (change)="radioChangeHandler($event)">
        <i>{{day}}</i>
    </div>

    <!-- the radio button change will be reflected below -->
    <p><span>You selected: </span><b>{{selectedDay}}</b></p>
</article>