is there an event for a mat radio group where we can detect if a value changes ? cause I wanna trigger a method or a function only if select value from the radio changes.
So for example I click botton A and the value is 0 and then i click button A again then it should return false since the value did not change.
#html
<mat-radio-group
[(ngModel)]="filters"
aria-label="Select an option"
[disabled]="isLoading"
>
<mat-radio-button
value="1"
(change)="onChange($event)"
>
A
</mat-radio-button>
<mat-radio-button
(change)="onChange($event)"
value="2"
>
B
</mat-radio-button>
</mat-radio-group>
#tscode
export class Something {
filters: any;
onChange(event: MatRadioChange) {
console.log('event' , event)
if (this.isLoading) {
return;
}
this.table.pageIndex = 0;
if (event.value === 2) {
this.filters = '2';
this.callAllData();
} else {
this.filters = '1';
this.callMyData();
}
}
You can use two-way binding [(ngModel)]="binding" to update your variable as such:
<mat-radio-group [(ngModel)]="selectedValue">
<mat-radio-button [value]="0">BUTTON A</mat-radio-button>
<mat-radio-button [value]="1">BUTTON B</mat-radio-button>
</mat-radio-group>
In your case, it would be:
#html:
<mat-radio-group
[(ngModel)]="filters"
(change)="onChange()"
aria-label="Select an option"
[disabled]="isLoading"
>
<mat-radio-button value="1">
A
</mat-radio-button>
<mat-radio-button value="2">
B
</mat-radio-button>
</mat-radio-group>
#typescript:
export class Something {
filters: any;
onChange() {
console.log('filters' , this.filters)
if (this.isLoading) {
return;
}
this.table.pageIndex = 0;
if (this.filters === 2) {
this.callAllData();
} else {
this.callMyData();
}
}