Card header background color on Angular2 materials

Question

I thought that it would be simple, but I'm struggling to set the background color of a card header within Angular2 materials and I'm not finding any examples. Therefore, given the following code, I would appreciate tips on how to go about setting the background color of md-card-title:

<md-card>
   <md-card-header>
      <md-card-title>Title</md-card-title>
      <md-card-subtitle>Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

Answer 1

Just add [style.backgroundColor]="'COLOR_YOU_WANT'" in your <md-card-header> selector:

<md-card>
   <md-card-header [style.backgroundColor]="'yellow'"> 
      <md-card-title>Title</md-card-title>
      <md-card-subtitle>Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

Link to working demo.

Alternatively, add a class in your css file:

.custom-card {
  background-color: gray;
}

and set the [ngClass] in your <md-card-header> selector:

<md-card>
   <md-card-header [ngClass]="{'custom-card':true}"> 
      <md-card-title>Title</md-card-title>
      <md-card-subtitle>Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

or another alternative is to use [ngStyle]:

<md-card [ngStyle]="{'padding':'0px'}">
   <md-card-header [ngStyle]="{'background-color':'green'}"> 
      <md-card-title [ngStyle]="{'font-size':'24px'}">Title</md-card-title>
      <md-card-subtitle [ngStyle]="{'font-size':'12px', 'color':'white'}">Subtitle</md-card-subtitle>
   </md-card-header>
   <md-card-content>
       Body text
   </md-card-content>
</md-card>

Answer 2

Either of these would help to set the header background:

1. Use ::ng-deep

   ::ng-deep .mat-card-header {
       background-color: red !important;
       padding: 5px !important;
   }
   
   ::ng-deep .mat-card {
       padding: 0 !important;
   }
   
   ::ng-deep .mat-card-content {
       padding: 5px !important;
   }
   

DEMO

2. Use encapsulation: ViewEncapsulation.None on components decorator an

   .mat-card-header {
       background-color: red !important;
       padding: 5px !important;
   }
   
   .mat-card {
       padding: 0 !important;
   }
   
   .mat-card-content {
       padding: 5px !important;
   }
   

DEMO