feat(card): allow md-card-title and subtitle to be used as attributes (#4122)

Author: willshowell

src/lib/card/card-header.html

@@ -1,6 +1,7 @@
 <ng-content select="[md-card-avatar], [mat-card-avatar]"></ng-content>
 <div class="mat-card-header-text">
   <ng-content
-      select="md-card-title, mat-card-title, md-card-subtitle, mat-card-subtitle"></ng-content>
+      select="md-card-title, mat-card-title, md-card-subtitle, mat-card-subtitle,
+      [md-card-title], [mat-card-title], [md-card-subtitle], [mat-card-subtitle]"></ng-content>
 </div>
 <ng-content></ng-content>

src/lib/card/card-title-group.html

@@ -1,6 +1,7 @@
 <div>
   <ng-content
-      select="md-card-title, mat-card-title, md-card-subtitle, mat-card-subtitle"></ng-content>
+      select="md-card-title, mat-card-title, md-card-subtitle, mat-card-subtitle,
+      [md-card-title], [mat-card-title], [md-card-subtitle], [mat-card-subtitle]"></ng-content>
 </div>
 <ng-content select="img"></ng-content>
 <ng-content></ng-content>

src/lib/card/card.ts

@@ -23,7 +23,7 @@ export class MdCardContent {}
  * @docs-private
  */
 @Directive({
-  selector: 'md-card-title, mat-card-title',
+  selector: 'md-card-title, mat-card-title, [md-card-title], [mat-card-title]',
   host: {
     '[class.mat-card-title]': 'true'
   }
@@ -35,7 +35,7 @@ export class MdCardTitle {}
  * @docs-private
  */
 @Directive({
-  selector: 'md-card-subtitle, mat-card-subtitle',
+  selector: 'md-card-subtitle, mat-card-subtitle, [md-card-subtitle], [mat-card-subtitle]',
   host: {
     '[class.mat-card-subtitle]': 'true'
   }

src/lib/core/compatibility/compatibility.ts

@@ -32,6 +32,8 @@ export class MdCompatibilityInvalidPrefixError extends MdError {
 /** Selector that matches all elements that may have style collisions with AngularJS Material. */
 export const MAT_ELEMENTS_SELECTOR = `
   [mat-button],
+  [mat-card-subtitle],
+  [mat-card-title],
   [mat-dialog-actions],
   [mat-dialog-close],
   [mat-dialog-content],
@@ -92,6 +94,8 @@ export const MAT_ELEMENTS_SELECTOR = `
 /** Selector that matches all elements that may have style collisions with AngularJS Material. */
 export const MD_ELEMENTS_SELECTOR = `
   [md-button],
+  [md-card-subtitle],
+  [md-card-title],
   [md-dialog-actions],
   [md-dialog-close],
   [md-dialog-content],