Angular Material 2 Card Header Buttons set Right

angular material card examples
mat-card-actions align right
angular material image
mat-card color
angular material button
angular material card api
angular material container
angular material align right

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.

.healthy-search {
    width: 100%
}

.healthy-card {
    margin-right: 5px;
    margin-bottom: 5px;
}
<div class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
  <div class="flex-item" fxFlex="90%" fxFlex.xs="90%">
    <mat-form-field class="healthy-search">
      <textarea matInput placeholder="Suche"></textarea>
    </mat-form-field>
  </div>
</div>
<div class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
  <div class="flex-item" fxFlex="85%" fxFlex.xs="85%">
    <mat-expansion-panel>
    
     <!-- Here is the Category -->
     

     <!--Elements of Category -->

      <div class="flex-container" fxLayoutWrap fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start">
        <div class="flex-item healthy-card" fxFlex="400px" *ngFor="let number of numbers" (click)="cardClick()">
          <mat-card class="example-card">
            <mat-card-header>
              <mat-card-title>Title {{number}}</mat-card-title>
              <button mat-icon-button fxLayoutAlign="right">
                <mat-icon aria-label="Example icon-button with a heart icon">Edit</mat-icon>
              </button>
              <button mat-icon-button fxLayoutAlign="right">
                <mat-icon aria-label="Example icon-button with a heart icon">Delete</mat-icon>
              </button>
            </mat-card-header>
            <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
            <mat-card-content>
              <p>
                The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan. A small, agile dog that copes
                very well with mountainous terrain, the Shiba Inu was originally bred for hunting.
              </p>
            </mat-card-content>
          </mat-card>
        </div>
      </div>
    </mat-expansion-panel>
  </div>
</div>

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> 

Card, <mat-card> is a content container for text, photos, and actions in the context of a single subject. <mat-card-actions>, Container for buttons at the bottom of the card In addition to the aforementioned sections, <mat-card-header> gives the  High Quality Prints. We Guarantee Lower Header Cards Prices Everyday. Order Now!

First take away the fxLayoutAlign="right" from the buttons. fxLayoutAlign is for containers.

You need to at a div or some other placeholder with fxFlex between the title and the buttons. This will push the buttons to the end.

<md-card-header fxLayout="row">
  <md-card-title >Title </md-card-title>
  <div fxFlex></div>
  <button md-button>Something</button>
</md-card-header>

Angular Material 2 Card Header Buttons set Right - angular - html, 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  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 angular material 7, this looks good for me:

<mat-card>
 <mat-card-header>
  <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>
  <div fxLayoutAlign="center center">
    <button mat-stroked-button>Click me!</button>
  </div>
 </mat-card-header> 
</mat-card>

Buttons on left and right in md-card-actions · Issue #5116 · angular , Cards can have buttons both on the left and right. item ( flex: 1 1 auto; ) is only working when setting align="end" in <md-card-actions> . Bug, feature request, or proposal: Proposal to create an internal element to align the butons inside a md-card-actions.. What is the expected behavior? Cards can have buttons both on the left and right.

Vertical alignment in mat-card-title and button not correct · Issue , Successfully merging a pull request may close this issue. None yet. 2 participants​. @jpike88 · @josephperrott. Well, I'm learning angular 2, and im starting by developing a log in form, and I'm having trouble making a button with conditional content. This complement template's code would go like: &lt;button

Angular Material Card Component, As per the official documentation, Angular Material Card Component is a container component which holds title text, image and action buttons  Card component is a kind of container that contains different elements like text, image, forms, maps, button, link and any other elements. As per the official documentation, Angular Material Card Component is a container component which holds title text, image and action buttons to represent the single or specific subject.

Angular Material 7 - Card, Angular Material 7 - Card - The , an Angular Directive, is used to create a card with material <mat-card-title> − Represents the section for title. 2, Modify app.​module.ts, app.component.ts, app.component.css and </p> </mat-card-content​> <mat-card-actions> <button mat-button>LIKE</button> All Rights Reserved. This behavior is the result of Angular 2/4's view encapsulation, which in Emulated mode will only inject (via style elements) component styles that match elements actually in your view template.