How to uncheck radio button programmatically

i have the below posted radio button, and i would like to know how can i uncheck it programmatically using type script.
i tried the following, i set the value of averageHeight to false, but that did not unchecked the radio button.
please let me know how to acheive that


<div id="idRadioButtonForAverageHeightDivision">
                <input [value]="0" [(ngModel)]="iOperationPasser.averageHeight" name="radioGroupForOperations" type="radio" clrCheckbox  (change)="toggleShowAverageHeight()"  [(checked)]="averageHeight"/>
                    <label id="operation-average-height">
                        {{ "SITE.AREAS_OF_COVERAGE_FOR_THRESHOLD.OPERATION_AVERAGE_HEIGHT" | translate }} 
                        <button class="btn btn-sm btn-icon" (click)="showInformation('SERVICE_DIST_4_AGRI')">
                            <clr-icon shape="help-info" class="is-solid"></clr-icon>


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

The default behavior of the radio input is to be un-unchecked.

You can control the properties of it with bind or something with angular, just access the property checked and change it.


<input type="radio" value="exm" #radio />

// access the input with local variable on the template
<button (click)="radio.checked=false">

OR —————————

<input type="radio" value="exm" [checked]="term" />

// now this is toggling the checked value, so it will check and uncheck - depend on the status
<button (click)="toggle()">

TS FILE ----------------------
public term: boolean = false

  this.term = !this.term


AS you want to access the value property, it pretty much looks the same:

<input type="radio" [value]="value" />

TS FILE ----------------------
// any change of the value will change it in the template. Since it's not a text input - ngModel is useless .
public value: string = 'Value here'

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x