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>

>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.


<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


Leave a Reply