angular mat radio check if value changes-CodePudding

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();
    }
  }

CodePudding user response：

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();
    }
}