Material radio button change event Angular 4

Question

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

Radio listing using [(ngModel)] example app http://www.freakyjolly.com/how-to-show-radio-input-listing-in-angular-6/ — Code Spy, Jul 19 '18 at 05:26

FAISAL · Accepted Answer · 2022-06-02T11:41:28.697

66

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.

edited Jun 02 '22 at 11:41

answered Sep 22 '17 at 11:00

FAISAL

33,618
10
97
105

Great, thanks. That solves the radio change issue perfectly. Still doesn't seem to update the pipe though. New to SO, should I split this question into two and accept your answer? Also, is the method of passing $event with Angular 2 material components part of a broader lesson that there are any good tutorials on? – Batters Sep 22 '17 at 11:12
8

With Angular 5 you need to import MatRadioChange from '@angular/material', the event you get in your radioChange() method is of type MatRadioChange and you don't have to put the (change) event on all mat-radio-button. You can simply put it on mat-radio-group. – herve Feb 20 '18 at 15:35
i didn't needed to add MdRadioChange. i m using angular 8. – romal tandel Jul 08 '20 at 06:08
This works, but is there a way to read the value of the radio group within the event? In other words, how to handle the 'change' event so the 'selected' value is already accessible? Thanks! – Budda Jul 12 '21 at 20:48

score 34 · Answer 2 · answered Jul 26 '18 at 17:51

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
    }
}

Material radio button change event Angular 4

2 Answers2

Linked