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

Issue

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 :

header before

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

header after

Solution

Put padding:0 on the mat-card. And to balance the space on the content, add margin on mat-content.
Use specific classes names to style the card:

.mat-card-header{
  background-color:gold ;
  padding:5px ;
}

 .mat-card{
  padding:0 ;
}

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

Demo


Old Answer:

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: gold !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:gold !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:gold !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

Answered By – Vega

Answer Checked By – Pedro (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.