How to reset radio button on click reset button in Angular2+?

Question

My HTML code:

 <div class="dropdown-menu dropdown-menu-right filter-dropdown-menu  row">
     <input type="radio" class="filter-dropdown-menu-padding" (click)="filter_source_type(0)" name="gender" value="male"> Admin
     <input type="radio" class="filter-dropdown-menu-padding" (click)="filter_source_type(1)" name="gender" value="male"> Manager
     <input type="radio" class="filter-dropdown-menu-padding" (click)="filter_source_type(2)" name="gender" value="male"> Member<br>

 </div>

Reset HTML code:

<div class="btn btn-primary btn-reset" (click)="reset_filter()">Reset</div>

My ts code for reset:

reset_filter() {
this.filter_source_type_value =null;
}

Answer 1

You can use ngModel for resetting radio button by assigning value null

Do this in your HTML code:

<div class="dropdown-menu dropdown-menu-right filter-dropdown-menu row">
   <input type="radio" #radio class="filter-dropdown-menu-padding" 
   [(ngModel)]="gender" (click)="filter_source_type(0)" name="gender"
   value="male"> Admin
   <input type="radio" #radio class="filter-dropdown-menu-padding" 
   [(ngModel)]="gender" (click)="filter_source_type(1)" name="gender" 
   value="female"> Manager
   <input type="radio" #radio class="filter-dropdown-menu-padding" 
   [(ngModel)]="gender" (click)="filter_source_type(2)" name="gender" 
   value="other"> Member
   <br>
</div>
<div class="btn btn-primary btn-reset" (click)="reset_filter()">Reset</div>

Do this in your .ts(component) code:

export class AppComponent {
    gender = null; // Declared property with default `null` value

    /**
     * This function is used to reset radio buttons
     */
    reset_filter() {
        this.gender = null;
    }
}