Map header background color on Angular2 materials

Question

I thought it would be simple, but I'm struggling to set the background color in the map title in Angular2 materials, and I can't find any examples. Therefore, given the following code, I would appreciate advice on adjusting 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'"to your selector <md-card-header>:

<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 the working demo .

Or add a class to your CSS file:

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

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

<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

Any of these will help set the background of the header:

• 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. encapsulation: ViewEncapsulation.None

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

DEMO

Answer 3

Angular Material uses palettes, so there are two ways:

1. Overwrite theme colors directly in the current palette (or create your own palette)
2. Use the !importantImportant flag to override the default colors, for example: md-card-title { background-color: green !important; } md-card-title { background-color: green !important; }(in some cases, you will also need ::ng-deepto access these elements)
3. Use NgStyle or NgClass