How do you deal with a div with mat-card-header-text on card material2?

This behavior is the result of Angular 2/4 view encapsulation , which in mode Emulated

will only inject (through style

) component styles that match the elements in your template.

So if you try to override the style .mat-*

like this:

.mat-card-header-text {
  height: auto;
  margin: 0;
}

      

        
        
        
      

    

but your HTML looks like this:

<md-card-header>
  <md-icon md-card-avatar>face</md-icon>
  <md-card-title>{{user.name}}</md-card-title>
  <md-card-subtitle>{{user.status | userStatus}}</md-card-subtitle>
</md-card-header>

      

        
        
        
      

    

then the rule .mat-card-header-text

won't be injected into the DOM since the injector doesn't see such an element in your template.

The simplest workaround is to include the element directly div.mat-card-header-text

in your template:

<md-card-header>
  <md-icon md-card-avatar>face</md-icon>
  <div class="mat-card-header-text">
    <md-card-title>{{user.name}}</md-card-title>
    <md-card-subtitle>{{user.status | userStatus}}</md-card-subtitle>
  </div>
</md-card-header>

      

        
        
        
      

    

Edit: as you pointed out, this creates an extra blank div.mat-card-header-text

, so this is not a perfect solution. The only way to fix this is if you create your own map component based on md-card

(perhaps using component inheritance ), but at this point you just modify the CSS component directly.

Otherwise, you can switch the view encapsulation mode for your component to None

:

import { ViewEncapsulation } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'user-card',
  templateUrl: 'user-card.component.html',
  styleUrls: ['user-card.component.css'],
  encapsulation: ViewEncapsulation.None
})
...

      

        
        
        
      

    

Although if you do this, the selector :host

will no longer work, so you will need to replace it with the selector specified in the decorator @Component

:

user-card {
   ...
}

      

        
        
        
      

    

make a class for the mat-card container and add

border-collapse:collapse;

      

        
        
        
      

    

worked wonders for me.

If you want to support a version with and without an image in the header, this is one possible solution. The idea is to toggle the class that captures the field when the image is not available (set via the input reference in the example). This way the map looks good with and without an image.

Html:

<mat-card>
  <mat-card-header [ngClass]="{'fix-margin': !link}">
    <mat-card-title>{{content}}</mat-card-title>
    <mat-card-subtitle>{{content}}</mat-card-subtitle>
    <img *ngIf="link" mat-card-avatar [src]="link">
  </mat-card-header>
  <mat-card-content>
    {{content}}
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>SHOW</button>
  </mat-card-actions>
</mat-card>

      

        
        
        
      

    

Css

.fix-margin {
  margin: 0 -8px;
}

      

        
        
        
      

    

Ts.

export class component {
  @Input() content;
  @Input() link;    
}

      

        
        
        
      

    

Maurice's answer on the spot:

border-collapse:collapse;

One line solves this problem.

I know this is an old question, but still it's a problem today. The way I solved it overridden it like this in the ts file:

ngAfterViewInit() {
    document.getElementsByClassName('mat-card-header-text')[0].setAttribute('style', 'margin: 0 0');
  }