Make content projection selectors more lenient

For example i tryed to pass a own component as mat-card-avatar into the <mat-card-header>:

<mat-card-header>
    <app-image class="mat-card-avatar"></app-image>
    <mat-card-title>Name</mat-card-title>
    <mat-card-subtitle>Subtitle</mat-card-subtitle>
</mat-card-header>

But this dont work, because <mat-card-header> allow only his own sub components on correct place: https://github.com/angular/components/blob/master/src/material/card/card-header.html

<ng-content select="[mat-card-avatar], [matCardAvatar]"></ng-content>
<div class="mat-card-header-text">
  <ng-content
      select="mat-card-title, mat-card-subtitle,
      [mat-card-title], [mat-card-subtitle],
      [matCardTitle], [matCardSubtitle]"></ng-content>
</div>
<ng-content></ng-content>

Please add [.mat-card-avatar] as class to line 1. Would be good if this is possible in every material component.

The current solution looks like:

<mat-card-header>
    <div mat-card-avatar>
        <app-image class="mat-card-avatar"></app-image>
    </div>
    <mat-card-title>Name</mat-card-title>
    <mat-card-subtitle>Subtitle</mat-card-subtitle>
</mat-card-header>

[SvenBudak]

But why not simply add in material elements a selector for class variant? this is much more easy for usage…

[ViktorSlavov]

@SvenBudak You can refer to the following StackBlitz example to see how you can use ngProjectAs for your case. The feature is not really well documented on the Angular wiki, but it basically allows a part of your template (i.e. app-image) to project itself as whatever you specify (i.e. ngProjectAs="[mat-card-avatar]", meaning it will get caught by all select="[mat-card-avatar]"), so it can fulfill ng-content’s [select] requirements.