How to Make a Radio Button Checked Dynamically in Angular?

To make a radio button checked dynamically in Angular, you have to bind the checked property of the radio button with a flag(eg. isChecked).

If the value of the flag which is bound with the checked attribute evaluates to true, the radio button becomes selected otherwise it remains unselected.

Let’s say we have a radio button which is bound with the isChecked flag. We want to make this radio button checked or unchecked based on the button click.

<input type="radio" name="gender" [checked]="isChecked">
<button (click)="doSomething();">Check/Uncheck</button>

---

We have also added a click event handler function doSomething() to the button which will be fired every time we click on it.

As we want to make the radio button checked or unchecked every time we click on the button, therefore, we have to toggle the value of the isChecked flag.

Here is what your ts file will contain:

isChecked: boolean = false;

doSomething(){
  
  this.isChecked = !this.isChecked;
  
  // this.isChecked = true   <- to make only checked
  // this.isChecked = false  <- to make only unchecked
  // Write your stuff here
}

---