Turn md-card element to mdCard Directive to give other elements 'Card powers'

[jagomf]

Proposal:

To have md-card be a Directive instead of a Component so any element/component can be given Card behavior

What is the expected behavior?

To be able to have <my-component mdCard>.

What is the current behavior?

Currently only a <md-card> component can be visualized as a Card.

What is the use-case or motivation for changing an existing behavior?

Be able to apply whatever logic to <my-component> and still keep visualization like a Card with mdCard directive.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

All

[josephperrott]

Unfortunately its not possible to have md-card as a Directive because it uses a template.

Furthermore, if the templating were to be removed, styles cannot be applied via Directive selectors as shown in the documentation for the @Directive decorator.

If you are looking to provide the elevated look of the md-card, you should be able to do this using box-shadow on any components.

[willshowell]

To supplement @josephperrott's answer, material provides a mat-elevation mixin and helper classes for adding elevation to elements:

<div class="mat-elevation-z12">I am an elevated div</div>

<div class="elevate-me">Me too!</div>

.elevate-me {
  @include mat-elevation(8);
}

See #3917 for in-progress guide

[jagomf]

Elevation is not the only feature that a card provides... If I only wanted a <div> to look like a card, I could just use class mat-card. That is not the point.

All the elements (<md-card-header>, <md-card-title>, <md-card-content>, etc) lose all their appearance and behavior if there is no <md-card> element on top.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}