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

Question

I need to align the text content in the header on left and right side of header tag. i tried different ideas, but none works for me. help me.

 <div style="width: 40%">
  <mat-card>
    <mat-card-header class="card-container">
      <mat-card-title class="card-container-right"> Test right</mat-card-title>
      <mat-card-title class="card-container-left"> Test left</mat-card-title>
    </mat-card-header>
    <mat-card-content>
    </mat-card-content>
  </mat-card>
</div>

Would you share with us what you have tried? – Narm Aug 24 '18 at 16:50 — Narm, Aug 24 '18 at 16:50
use of
,
, with style of textallign:left , right etc @Narm
– Sivabalakrishnan Aug 24 '18 at 16:52 — Sivabalakrishnan, Aug 24 '18 at 16:52

score 12 · Answer 1 · answered Aug 24 '18 at 17:35

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.

i was trying my own solution, no need to downvote! downvote is for wrong answer. — Fateme Fazli, Aug 24 '18 at 17:45
Hi @fatemefazli, it wasn't me that downvoted your answer. Although I did just look at your demo and it doesn't work btw. — Narm, Aug 24 '18 at 18:23
This is not working with the current version. Any other ideas? — Alex, Jul 22 '19 at 23:52

wFitz · Answer 2 · 2018-08-24T20:36:25.103

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

Worked for me in `mat-card-header` – metoyou May 13 '23 at 09:22 — metoyou, May 13 '23 at 09:22

score 4 · Answer 3 · answered Feb 20 '19 at 10:54

4

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*/

    }

answered Feb 20 '19 at 10:54

Codexxx

63
9

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

3 Answers3

Linked