Nesting multiple mat-radio-button not working as expected

1
votes

I have mat-radio-group that has more mat-radio-group within it. I have created a stackblitz here https://stackblitz.com/edit/angular-mdgy7x?file=app/radio-overview-example.ts

In the example when the page loads, I want to show 'ledger' radio option selected along with value1 below it selected as default. If I update the radio button to 'available', I need to select the 'value 1' below 'available' radio.

The code works fine for all cases, except the first case wherein I have to show default selection.

Can some one point out where I am going wrong?

3
htmlangularangular-material
Can you add commas to your text please? It is hard to read without. - Ambroise Rabier
It seems you have changed the contents of the stackblitz since posting the question. That should be avoided, and I hope my answer will still be useful to you. - Constantin Groß

3 Answers

1
votes

For some reason, nested radio groups / buttons need a second update cycle in order to correctly update the default state. One way to achieve this, is to add a 0ms timeout in one of the lifecycle hooks before calling onRadioFilterChanged() with the default value. The earliest hook I found this to work in is ngOnInit(). You'll also need to set all checked properties to false so that a state change can actually happen, triggering the update.

So, adding

ngOnInit() {
    setTimeout(_=> this.onRadioFilterChanged('L'), 0);
}

and setting checked: false also on the first checkboxes in each group will do the trick, as demonstrated in this updated stackblitz: https://stackblitz.com/edit/angular-mdgy7x-dcijkt?file=app%2Fradio-overview-example.ts

Despite the 0ms timeout, you'll notice a slight delay on page load, but other than that and the kind-of-hack-ish feel to it, it works - and I haven't been able to get it to work in any other way so far.

0
votes

First, add the call to ngOnInit:

ngOnInit(){
    this.onRadioFilterChanged("L");
}

and create a variable to keep the value of ledger and available like for radios. Then use that value in onRadioFilterChanged.

Another thing that is not working is when you select one of the sub-radiobuttons.

0
votes

I achieved what I want using the following code. What I basically did is created separate radio buttons for parent and child and each of them has an ngModel associated with it. I then manipulate ngModel based on user interaction. Following is the stackblitz, https://stackblitz.com/edit/angular-mdgy7x?file=app/radio-overview-example.ts