How to align left and right text mat-card-header in angular 4?

You can also do this if you want to continue to use the mat-title elements:

See working StackBlitz Example

In your (I'll call it) example-card.component.html file

<mat-card  >
<mat-card-header>
 <mat-card-title class="card-container-left"> Test left</mat-card-title>
 <mat-card-title class="card-container-right"> Test right</mat-card- title>
</mat-card-header>
<mat-card-content>
</mat-card-content>

Then in your example-card.component.css

.card-container-right{
  display: inline;
  float: right;
}

.card-container-left{
  display: inline;
}

..and finally in your styles.css

.mat-card-header-text{
  width: 100% !important;
}

The trick to this is overriding Angular materials .mat-card-header-text to be 100% the width of the mat-card-header. Otherwise it behaves like in inline element and only takes up the width of its children elements text. Preventing you from spacing them out.

You can use what material design uses in mat-toolbar

<mat-card-title>
   <span>Test left</span>
   <span class="fill-remaining-space"></span>
   <span>Test right</span>
</mat-card-title> 

in your .css

.fill-remaining-space {
   flex: 1 1 auto;
}

I am sorry, This doesn't work !!!!! Works in Mat-Toolbar, bat not in Mat-card Title.

Here is how it works, I knew I had used it somewhere

<mat-card>
  <mat-card-title-group>
    <span>Test left</span>
    <span class="fill-remaining-space"></span>
    <span>Test right</span>
  </mat-card-title-group>
</mat-card>

see : https://stackblitz.com/edit/angular-rb5vmu for working example

add custom css on .mat-card-header class

 .mat-card-header{
        justify-content: flex-end /* for right*/
        justify-content: flex-start /* for left*/
        justify-content: centre /* for center*/

    }