Default radio button select value angular material 2

Question

I am working on angular material 2 radio button following this documentation:https://material.angular.io/components/component/radio.

The problem that I am facing is to have the radio button a default selected value of No. If you see in the plunker:https://plnkr.co/edit/jdRxVLdSfFqR4XOdpyUN?p=preview you will find that none of the options are selected. I would want the default value to be No when the page loads.

Answer 1

A lot of the plunkrs don't seem to work for me anymore. There's a modified stackblitz here:

Blitz

As mentioned we can either set the ngModel and the variable:

[(ngModel)]="favoriteSeason"

and in the 'ts' file:

  favoriteSeason: string = 'Winter';

Or we can set the checked:

[checked]="season === 'Winter'" 

Another little gotcha I've discovered recently is that if you mistakenly give mat-checkbox incorrect (duplicate IDs), then it does not work - you cannot check anything. Ensure your IDs are unique.

Answer 2

You can use checked, like so:

[checked]="data.value ==='false'" 

notice that we are checking using string 'false', instead of false, as your value has the string with value false.

Plunker

Answer 3

You can achieve it with [checked] attribute. See this Plunker

Answer 4

there is another option which is you can use [(ngModel)] to initialize the md-radio-group with your component.

plunker demo.

Answer 5

I love the reactive approach when working with material radio buttons. Below is an example of how to check for true and false with your database for a specific formControlName

Component within the Dialog Box

<mat-radio-group formControlName="trueClient">
                <mat-radio-button class="material-radio" value="true" [checked]="data.trueClient === 'true'">True Client</mat-radio-button>
                <mat-radio-button class="material-radio" value="false" [checked]="data.lostLead === 'false'">Lost Lead</mat-radio-button>
        </mat-radio-group>

If this is an update form, make sure to set the values in your form builder. Example below:

.ts file for the component within the dialog box.

this.viewClient.setValue({
      trueClient: this.data.trueClient
    });

In this case i am opening the data within a dialog box. So the data is coming from the below: component.ts prior that opens the dialog box. Just a reference so that you know where i got the data variable from above to set the values.

Component used to open the dialog box. Reference to Dialog in Materials docs for more info on how to setup.

const dialogRef = this.dialog.open(ClientNotesComponent, {
        height: '600px',
        width: '800px',
        data: {trueClient: trueClient}
    });
 });
}

Answer 6

<mat-radio-button [checked]="true"</mat-radio-button>

Answer 7

HTML file

<mat-radio-group aria-label="Select an option" [(ngModel)]="formValues['type']">
    <mat-radio-button value="individual">Individual</mat-radio-button>
    <mat-radio-button value="business">Business</mat-radio-button>
</mat-radio-group>

Ts file

ngOnInit()
{
    this.formValues['type'] = "business";
}

Answer 8

In my case the selection issue has been resolved by replacing the name="howLong" attribute with [ngModelOptions]="{standalone: true}".
Point to be noted, the selelction was working for A day or less than a day. But it was not working for More than a day

Non working version:

   <mat-radio-group
        [(ngModel)]="howLong"
        name="howLong"
        (change)="resetTime()">
        <mat-radio-button class="ignore" value="MoreThanADay">
            More than a day
        </mat-radio-button>
        <mat-radio-button value="ADayOrLessThanADay">A day or less than a day</mat-radio-button>
    </mat-radio-group>

Working version:

   <mat-radio-group
        [(ngModel)]="howLong"
        [ngModelOptions]="{standalone: true}"
        (change)="resetTime()">
        <mat-radio-button class="ignore" value="MoreThanADay">
            More than a day
        </mat-radio-button>
        <mat-radio-button value="ADayOrLessThanADay">A day or less than a day</mat-radio-button>
    </mat-radio-group>

Answer 9

if you want to pass a string or boolean to your mat-radio-group using [(ngModel)], you can set a default value for your [(ngModel)] in the TS file. like this: HTML file

Ts file