Card header background color on Angular2 materials

mat-card background color primary
material card examples
angular material
md-card background color
how to set background color in angular material
angular material card
angular material get background-color
mat-card examples

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>

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>

How to get mat-card-header background fully colored in Angular 2 , ::ng-deep .mat-card-header{ background-color:red !important; Angular material uses mat-select-content as class name for the select list. Angular-material just added a color service and a directive to use the colors defined in a theme anywhere in your code (1.1.0-rc4). You can now do <md-card-header md-colors="::{backgroundColor: 'default-primary-700'}"> .

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

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

How can I set mat-card background color to the accent color in , Hi guys, In Angular Material I want my Material Cards' background color to be same as my theme's accent color but I More posts from the Angular2 community. Hi guys, In Angular Material I want my Material Cards' background color to be same as my theme's accent color but I don't how. Appreciate any help, thanks.

Angular Material uses palettes, so there are two ways:

  1. Overwrite theme colors right in the current palette (or create your own palette)
  2. Use !important flag to override default colors (if this doesn't work without the flag, and in many cases it doesn't), like this: md-card-title { background-color: green !important; } (in some cases you will need ::ng-deep as well to get access to those elements)
::ng-deep md-card-title {
  background-color: green !important;
}
  1. Use NgStyle or NgClass

Setting background color for header of Angular Material Card, Setting background color for header of Angular Material Card - css. </mat-card- header> So you can target it from its component with: .mat-card-header { background-color: red; } Or from its parent How to overwrite angular 2 material styles? It's interesting that in the documentation, there is a div with a different colored header (see 'Basic cards' in material_card.png attachment), but then the material component itself ('Simple card') is all (header and body) the same background-color.

you can set padding 0 to mat-card and set a padding to card inner element (mat-card-header, mat-card-content) :

<mat-card style="padding:0"> <mat-card-header style="padding:1rem; backgorund-color: blue"> ... </mat-card-header> <mat-card-content style="padding:1rem"> ... </mat-card-contetn> </mat-card>

How to get mat-card-header background fully colored in Angular 2?, mat-card-actions align right angular material image mat card header api md-card background color angular material container mat-card flip angular material get� I'm currently working on visual design for web application which use Angular 2/ Material design. In there, I have a doubt regarding a MD dialog header design, does it need to be with background colour or just the header text on the dialog without background colour? where I couldn't find further details on MD guideline. Appreciate you help/comments.

Material cards to support header with different background-color , Background color on card-header would be different than card body. What is the current behavior? Cards (and material in general?) seem to only� edit: This strategy involves replacing Material functionality. for most cases, I would recommend Jake Stoeffler's answer above. If you want to set the background colors, you likely want to customize the entire background and foreground palette by emulating the mat-light-theme or mat-dark-theme functions with your own replacement.

Card, <mat-card> is a content container for text, photos, and actions in the context of a However, Angular Material provides a number of preset sections that you can use In addition to the aforementioned sections, <mat-card-header> gives the� What you shouldn’t do: My first attempt was to create the color variables in the theme.scss directly.That’s wrong because it would @include mat-core and angular-material-theme every time we

Demos > Colors, Consider the custom <user-card> component below where the md-colors attribute is used to color the background and text colors using either the current or� Card component is a kind of container that contains different elements like text, image, forms, maps, button, link and any other elements. As per the official documentation, Angular Material Card Component is a container component which holds title text, image and action buttons to represent the single or specific subject.

Comments
  • Shouldn't Material be able to interpret colors like "accent" or "warn"? What's the point in using a color scheme if you can't use it?
  • The problem with this approach is that it doesn't honor the corner rounding. It looks strange with a large white border in the header or footer as in the first two cards in the demo and if you remove the built-in padding you end up with traditional sharp corners as in the third card in the demo. I would think the OP is looking for how to apply a background color while still retaining the mat-card styling (i.e. modern rounded corners), at least that's what I am looking for.
  • You're right, the OP should inspect the DOM and detect, the style of which element He/She should change. For dynamically generated elements, which are not in component's HTML, we should use ::ng-deep or /deep/.
  • I knew that ::deep will be depricated, but didn't knew about encapsulation: ViewEncapsulation.None, thanks for the info!
  • Anyway, the life without ::ng-deep and encapsulation will be really hard, we need the way to get access to shadow DOM (or how it's called correctly).