From 243b97dfb0bab051ddecb730077ab7ef55304c97 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 14 Jul 2017 02:12:29 +0200
Subject: [PATCH] fix(card): unable to bind to align attribute (#5495)

Fixes not being able to bind to the `align` attribute on the `md-card-actions`.

Fixes #5490.
---
 src/lib/card/card.scss |  8 ++++----
 src/lib/card/card.ts   | 13 ++++++++++---
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/lib/card/card.scss b/src/lib/card/card.scss
index 2e1b2f8b6fb..b1745820a26 100644
--- a/src/lib/card/card.scss
+++ b/src/lib/card/card.scss
@@ -43,11 +43,11 @@ $mat-card-header-size: 40px !default;
   margin-left: -16px;
   margin-right: -16px;
   padding: 8px 0;
+}
 
-  &[align='end'] {
-    display: flex;
-    justify-content: flex-end;
-  }
+.mat-card-actions-align-end {
+  display: flex;
+  justify-content: flex-end;
 }
 
 .mat-card-image {
diff --git a/src/lib/card/card.ts b/src/lib/card/card.ts
index 9cedf766a88..7fa65ab10bf 100644
--- a/src/lib/card/card.ts
+++ b/src/lib/card/card.ts
@@ -10,7 +10,8 @@ import {
   Component,
   ViewEncapsulation,
   ChangeDetectionStrategy,
-  Directive
+  Directive,
+  Input,
 } from '@angular/core';
 
 
@@ -56,9 +57,15 @@ export class MdCardSubtitle {}
  */
 @Directive({
   selector: 'md-card-actions, mat-card-actions',
-  host: {'class': 'mat-card-actions'}
+  host: {
+    'class': 'mat-card-actions',
+    '[class.mat-card-actions-align-end]': 'align === "end"',
+  }
 })
-export class MdCardActions {}
+export class MdCardActions {
+  /** Position of the actions inside the card. */
+  @Input() align: 'start' | 'end' = 'start';
+}
 
 /**
  * Footer of a card, needed as it's used as a selector in the API.