Material radio button change event Angular 4

user_5887968 0
Viewed 120735

I am trying to use the change output of an md-radio-buttons as follows:

<md-radio-group [(ngModel)]="selected">
    <md-radio-button *ngFor="let a of array" [value]="a"
                 (change)="radioChange()">
        {{a}}
    </md-radio-button>
</md-radio-group>

TS:

selected: string;
filter: any;

radioChange() {
    this.filter['property'] = selected;
    console.log(this.filter);
}

This always seems to be one step behind the radio buttons. i.e. when changing selection from radio A to radio B, it will console.log the value of radio A.

Any help would be much appreciated.

Cheers,

P

angular-material2 angular-material angular
2 Answers

For Material version >= 6, refer to the following answer: https://stackoverflow.com/a/46037191/1791913

The following answer is for Material version < 6:

This happens because the change event is fired before the model has been updated. So your selected property has the previous value. Change your code to following to get the event on (change):

<md-radio-group [(ngModel)]="selected">
    <md-radio-button *ngFor="let a of array" [value]="a" (change)="radioChange($event)">
        {{a}}
    </md-radio-button>
</md-radio-group>

... and in your class, do the following:

import { MdRadioChange } from '@angular/material';
// ...

radioChange(event: MdRadioChange) {
    this.filter['property'] = event.value;
    console.log(this.filter);
}

Link to working demo.

user_17919130

Set name property and change event to mat-radio-group in .html file:

<mat-radio-group 
    name="radioOpt1" 
    [(ngModel)]="selectedRadio"
    (change)="radioChange($event)">
    <mat-radio-button *ngFor="let opt of options" 
        [value]="opt">{{opt}}</mat-radio-button>
</mat-radio-group>

Then in component.ts file:

import { MatRadioChange } from '@angular/material';
...

radioChange($event: MatRadioChange) {
    console.log($event.source.name, $event.value);

    if ($event.source.name === 'radioOpt1') {
        // Do whatever you want here
    }
}
user_26367820
Related