Angular 2 radio button events

Question

What are those events called in Angular 2 when radio button is selected or unselected.

Something like

<input type="radio" (select)="selected()" (unselect)="unselected()" />

So when I click one radio button in a group, it will fire selected() for the new selection and unselected() for the previous selection.

Solution 1

It works,

<input type="radio" (change)="handleChange($event)" />

But you need code more to judge 'selected' or 'unselected'.
You may try this in your *.ts file:

  export class Comp {

    private _prevSelected: any;

    handleChange(evt) {
      var target = evt.target;
      if (target.checked) {
        doSelected(target);
        this._prevSelected = target;
      } else {
        doUnSelected(this._prevSelected)
      }
    }

  }

Solution 2

It works when you assign the click event to the label, instead of the input.

Solution 3

The html is like

 <div *ngFor = " let displayParameter of displayParameters" >    
    <!-- <li><a href="#">{{displayParameter}}</a></li>     -->
    <!-- <input type="radio"  name="displayParameter"  (change) ="handleChange(event)")>  -->
    <h5><input type="radio" name="radiogroup" (change)="handleChange(displayParameter)" [checked]="(idx === 0)" >{{displayParameter}} </h5>
</div>

and code is like

 handleChange(evt){ 
            this.displayParameter = evt;
        console.log(evt);
      }