How to get mat-card-header background fully colored in Angular 2?

mat-card background color primary
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 background-color

I have made a contact form in Angular 2. I would make a colored top bar

<md-card class="mdcardcontact">
  <md-card-header style="background-color: black;   width:100%">
  </md-card-header>
  <div>
    <md-card-content>
      <form [formGroup]="form" class="form">
        <div>
          <md-input-container class="full-width">
            <input mdInput type="text" formControlName="name" placeholder="Votre nom">
          </md-input-container>

        </div>
       </form>
    </md-card-content>
  </div>
</md-card>

That's what I get :

I would like something like the yellow rectangle but using md-card-header :


Put padding:0 on the mat-card. And to correct the padding, add margin on mat-content.

I would suggest four options.

1. Using ::ng-deep.

Use the /deep/ shadow-piercing descendant combinator to force a style down through the child component tree into all the child component views. The /deep/ combinator works to any depth of nested components, and it applies to both the view children and content children of the component. Use /deep/, >>> and ::ng-deep only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation. For more information, see the Controlling view encapsulation section. The shadow-piercing descendant combinator is deprecated and support is being removed from major browsers and tools. As such we plan to drop support in Angular (for all 3 of /deep/, >>> and ::ng-deep). Until then ::ng-deep should be preferred for a broader compatibility with the tools.

CSS:

::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. Using ViewEncapsulation

... component CSS styles are encapsulated into the component's view and don't affect the rest of the application. To control how this encapsulation happens on a per component basis, you can set the view encapsulation mode in the component metadata. Choose from the following modes: .... None means that Angular does no view encapsulation. Angular adds the CSS to the global styles. The scoping rules, isolations, and protections discussed earlier don't apply. This is essentially the same as pasting the component's styles into the HTML.

None value is what you will need to set material style from your component. Angular material uses mat-select-content as class name for the select list. So can set on the component's selector:

Typscript:

  import {ViewEncapsulation } from '@angular/core';
  ....
  @Component({
        ....
        encapsulation: ViewEncapsulation.None
 })  

CSS

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

.mat-card{
  padding:0 !important;
}

.mat-card-content{
  padding:5px !important;
}

DEMO


3. Setting styles in style.css

style.css

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

.mat-card{
  padding:0 !important;
}

.mat-card-content{
  padding:5px !important;
}

DEMO


4. Using inline style

HTML

<mat-card style="padding:0">
    <mat-card-header style="background-color:red;padding:5px}">
        <mat-card-title>Title</mat-card-title>
        <mat-card-subtitle>Subtitle</mat-card-subtitle>
    </mat-card-header>
    <mat-card-content style="padding:5px !important;">
        Body text
    </mat-card-content>
</mat-card>

DEMO

Card header background color on Angular2 materials, ::ng-deep .mat-card-header { background-color: red !important; (in some cases you will need ::ng-deep as well to get access to those  Use a SCSS mixin. Here's the setup I use for my app template.. Variables set in the mixin in material-styles.scss will be set based on the theme defined in material-themes.scss, where the mixin is applied to the theme.


I would try adding

position: absolute; top: 0; 

To the header style tag where you specified the background color. The md-card component has a default padding value for the whole card, so you'll have to position the header absolutely to ignore that padding value. But it might cause other position changes to the rest of the card elements if you do it like that. If you were going to use that style a lot, I would just make your own version. Here's the source, https://github.com/angular/material2/tree/master/src/lib/card

Setting background color for header of Angular Material Card, I assume there is a way to get a full bleed colored header without having to remove the to the original angular material for angular 1 but did not find anything for 2+. Trying to change the background of material.angular.io mat-​card globally. 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.


The /deep/ combinator is slated for deprecation in Angular, so its best to do without it.

Unfortunately, Angular Material is highly specified, which makes it very difficult to override without using /deep/

The best way I have found is to use an ID, which allows you a higher specificity compared to the default Angular Material styles.

<div id="my-card">
  <mat-card>
    <mat-card-title> Title
    </mat-card-title>
    <mat-card-content> Content </mat-card-content>
  </mat-card>
</div>

Then, the 'my-card' id can be used to target this card in the global.scss file. It can't be targeted from the component.scss without breaking your view encapsulation, which is probably something you don't want to do.

The nice thing, is that everthing within that with the id of 'my-card' can now be easily targeted, including material animations, which are hard to target any other way.

If you have menus, buttons, etc. they can all be styled using .scss and without using important!

global.scss

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

I hope the Angular Material team pulls back their specificity in the future because currently there's no easy way to override their defaults.

How can I set mat-card background color to the accent color in , In Angular Material I want my Material Cards' background color to be same as my theme's accent color but I don't how. map-get($theme, accent); mat-card { background-color: mat-color($accent); } More posts from the Angular2 community. 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, However, the align property on <mat-card-actions> can be used to position the actions at the 'start' or 'end' of the container. link Card headers. In addition to the  Converting decimal value to hex value in Angular to change background-color dynamically. Here is the component import { Component } from '@angular/core'; @Component({ selector: 'my-


Cards, 2. Thumbnail [optional] Cards can include thumbnails to display an avatar, logo, or icon. 3. Content can receive different levels of emphasis, depending on its level of hierarchy. Cards contain rich media, primary title, supporting text, and actions. Use inset dividers (1), dividers that do not run the full length of a card,  Hi Guys, Angular 2/4 version. I have a getbootstrap panel-heading with a title and my object is to change the background color of the panel heading based on the color code that comes with the record.


Cards, Cards are a convenient means of displaying content composed of different Card Title. I am a very simple card. I am good at containing small bits of information. Just add the card-reveal div with a span.card-title inside to make this work. Test 1; Test 2; Test 3 Colored or dark background card with tabs. Dont Pay Full. Angular Cards demo that contains gesture enabled checklist and hierarchical listview. Add or remove elements from the list. For Angular 2/4/5/6/7/8/9 and Ionic 2/3/4/5.