Align left and right in mat-card-title

Question

Using the following code in Angular 5:

  <mat-card>
      <mat-card-title> Test message </mat-card-title>
  </mat-card>

I get this:

How can I get this (some text is left-aligned, some text is right-aligned)?

I tried creating div and put inside paragraphs with predefined css but it didnot work out.

Solution 1

You can also do it with fewer lines and adjust it better to the content by using a container and flex properties:

<mat-card class="card-container">
  <mat-card-title > Test message </mat-card-title>
  <mat-card-title> Test message </mat-card-title>
</mat-card>

and this CSS:

.card-container {
  /*  not needed styles to reflect it */ 
  background: blue;
  padding: 10px;
  color: white;
  width: 500px;

  /* needed styles below */
  display: flex;
  justify-content: space-between;
}

You can check a working sample here: https://jsfiddle.net/VanessaRC/Lz9vz6bs/1/

This would ensure, that if you adjust the width to the container you need, the style adjusts nicely to fit without breaking and keeps your HTML clear and easy to read.

Solution 2

Use flexbox:

.container {
  display: flex;
}

.fill {
  flex: 1;
}

<div class="container">
  <div>Card</div>
  <div class="fill"></div>
  <div>Title</div>
</div>

Solution 3

Although the previous posters address the question sufficiently, once you add card content, it gets more complicated. I'd suggest to look at this answer for a more complete solution: How to align left and right text mat-card-header in angular 4?