How to trigger click event when I apply checked to a radio button?

Question

I have an uninitialized property in app.component.ts :

color!:string;

I want color to be automatically initialized when I set checked to a radio button:

<div>
  <input type="radio" name="colors" (click)="color='red'" checked>Red
  <input type="radio" name="colors" (click)="color='blue'">Blue
  <input type="radio" name="colors" (click)="color='green'">Green
</div>

Unfortunately, checked does not trigger the click event so color is still uninitialized. Any idea to solve it?

Answer 1

Use input() :

<input type="radio" name="colors" value="red" (input)="onInput($event)">Red
<input type="radio" name="colors" value="blue" (input)="onInput($event)">Blue
<input type="radio" name="colors" value="green" (input)="onInput($event)">Green

onInput(event: Event) {
  this.color = event.target.value;
}

Or you can use ngModel :

<input type="radio" name="colors" value="red" [(ngModel)]="color">