Search code examples
cssangularangular-materialmat-card

Align the text of material card title to right

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>
Solution

  • 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;
}