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

html angular alignment angular-material mat-card
Sivabalakrishnan picture Sivabalakrishnan · Aug 24, 2018 · Viewed 19.1k times · Source

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>

Answer

Narm picture Narm · Aug 24, 2018

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.

Related questions

(change) vs (ngModelChange) in angular

Angular 1 does not accept onchange() event, it's only accepts ng-change() event. Angular 2, on the other hand, accepts both (change) and (ngModelChange) events, which both seems to be doing the same thing. What's the difference? which one is best for performance? …

Read More
Binding select element to object in Angular

I'd like to bind a select element to a list of objects -- which is easy enough: @Component({ selector: 'myApp', template: `<h1>My Application</h1> <select [(ngModel)]="selectedValue"> <option *ngFor="#c of countries" …

Read More
Angular 2 Checkbox Two Way Data Binding

I´m fairly new to Angular2 and I have a little problem: In my Login-Component-HTML, I have two checkboxes, which I want to bind in two way data-binding to the Login-Component-TypeScript. This is the HTML: <div class="checkbox"> &…

Read More