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.
angular · Jul 14, 2017 · 243b97d · 243b97d
1 parent d04230c
commit 243b97d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git 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
@@ -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.