How to Make a Radio Button Selected by default in Angular?

To make a radio button selected by default in Angular, you can simply add a checked attribute to the radio button. The checked attribute will make the radio button selected by default among a group of the radio buttons.

<input type="radio" name="gender" checked >

If there is a group of multiple radio buttons with the same name and you add a checked attribute in more than one radio buttons, only the last button with the checked attribute will be selected by default.

<div>
    Male<input type="radio" name="gender" checked >
    Female<input type="radio" name="gender" checked >   <!-- Selected by default -->
    Others<input type="radio" name="gender">
</div>

If you want to select the radio button dynamically based on some condition then you have to bind the checked attribute with a flag(eg. isChecked):

<input type="radio" name="gender" [checked]="isChecked">

Then you have to declare the isChecked variable in your ts file. Set it to true if you want the radio button selected by default, otherwise set it to false.

isChecked: boolean = true;

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.