Angular – How to change color of radio button in angular material 2

Indeed, you cannot use color="primary" on every HTML element.

What I did is a class called color-primary

@import '~@angular/material/theming';
@include mat-core();

$primary: mat-palette($mat-deep-purple, 600, 500, 900);
$accent: mat-palette($mat-amber, A400, A300, A600);


.color-primary {
  color: mat-color($primary);
}

.color-accent {
  color: mat-color($accent);
}

Of course, I've set the color here but you can create another class, for example : background-color-primary.

(here's the link of my sample project : Pizza-Sync).

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.