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

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>

Answers:

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.

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

}

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 stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0