Make content projection selectors more lenient

[SvenBudak]

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>

[Airblader]

This can be achieved using ngProjectAs.

[SvenBudak]

@Airblader Thanks for this, but it dont really works in this case. Its the first time i hear about this feature. but after testing i see not any change. (Angular 7 ofc)

Sure that this is not depricated? My IDE also dont give me an autocompletation named ngProjectAs

[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.

[SvenBudak]

@ViktorSlavov Thanks for this cool demonstration. but the styling is not working in this way. :)
mat-card-avatar is 40x40 and have border-radius: 50%

[ViktorSlavov]

@SvenBudak
I had some styles set in my custom component's css. They'll take precedence over the styles applied by the .mat-card-avatar class.
If you leave only the display: block styling under :host, the app-image component will fallback to the styles provided by .mat-card-avatar

[SvenBudak]

I know that I can do this. But it feels like a dirty hack. What is if material style guide change soon to non border radius avatars? Then I need to change all manually...

[ViktorSlavov]

@SvenBudak , I'm not sure I phrased it correctly - I meant the opposite - you can remove all of the styles for :host in the app-image.css and it will fallback to the styles provided by material for .mat-card-avatar - here is an updated example.

[SvenBudak]

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

[ntziolis]

@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.

Super helpful. Thx