Search code examples
angularangular6

How get checked value from radio button angular


I need to get value from radio button in angular. Suppose to have this html code:

 <label class="radio-inline">
   <input class="form-check-input" type="radio" [(ngModel)]="dog" name="gob" value="i" [checked]="true" (change)="onItemChange(item)"/>Dog
 </label>
 <label class="radio-inline"> 
   <input class="form-check-input" type="radio" [(ngModel)]="cat" name="cat" value="p"  (change)="onItemChange(item)"/>Cat
 </label>

In my ts page I need to get the value of radio button like

dog.value

My purpose is:

  1. Set default cheched to first radio button
  2. Get the value when I click on radio button

Anyone can help me?


Solution

  • You can bind the data of radio button. Just add the value for radio button and change in the ngModel

    html

    <input class="form-check-input" type="radio" value="dog" 
    [(ngModel)]="dog.value" name="gob" value="i" [checked]="true" 
    (change)="onItemChange($event.target.value)"/>
    

    ts

    onItemChange(value){
       console.log(" Value is : ", value );
    }