How to uncheck radio button programmatically

November 4, 2021

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

html:

<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>
                        </button>
                    </label>
            </div>

>Solution :

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.

like:

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


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

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()">
    uncheck
</button>


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

toggle(){
  this.term = !this.term

}