How to set the background-color of a div as primary theme color in Angular 2 Material

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).