Angular Material 2 Card Header Buttons set Right

Question

I use the Angular Material 2 and I want in a card-header icon buttons. How can I set the buttons to the right side?

My plan:

Current Website:

I want to set the buttons rop right in the header. How can i do it? I exlude the category code because there is no problem. In the typescript code is only a for loop to add more cards and a dummy method for click on a card.

Lyror

Answer 1

This post is quite old but maybe someone else stumble upon this as well. (As of writing this answer the current version is Angular Material 6)

I recommend using the <mat-card-title-group> attribute. From the docs (https://material.angular.io/components/card/overview):

<mat-card-title-group> can be used to combine a title, subtitle, and image into a single section.

This way the title and description will be bundled into one single div and the fxFlex container actually works. This also allows to add buttons / icons to the left.

An example could look like this:

<mat-card-header>
    <mat-icon>help</mat-icon>
    <mat-card-title-group>
        <mat-card-title>
            Title
        </mat-card-title>
        <mat-card-subtitle>
            Subtitle
        </mat-card-subtitle>
    </mat-card-title-group>
    <div fxFlex></div>
    <button mat-button>Click me!</button>
</mat-card-header>