1

I try to align my title of matcard to right but the css doesn't work .. why ?

<mat-card [ngStyle]="{ 'margin':'5px','height':'130px'}">
  <mat-card-header>

   <mat-card-title [ngStyle]="{ 'text-align':'right' }">BLABLA</mat-card-title>

  </mat-card-header>

</mat-card>
al NTM
  • 247
  • 5
  • 15

2 Answers2

3

you can do something like this:

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

Then define some styles for these classes in your css/scss:

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

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

and then inside your styles.css

.mat-card-header-text{
  width: 100% !important;
}
yglodt
  • 13,807
  • 14
  • 91
  • 127
nircraft
  • 8,242
  • 5
  • 30
  • 46
2

You can jus use this 

<mat-card style="height:100px;width:300px;display:flex;justify-content:center;align-items:center;">
   <mat-card-content><span>Contents</span></mat-card-content>
</mat-card>

STACKBLITZ DEMO

Sajeetharan
  • 216,225
  • 63
  • 350
  • 396