Angular: A use case for `ngProjectAs`

How can I get an ng-content select filter to work with projected template content?

Sep 6 '19 Comments: 2 Answers: 1

9

I have a List component that's used to render a list. (Well, I don't, but I've tried to distil my problem down into a noddy example that's easy to understand).

The template for the List component has one or more ListItem components that allow the list items to be defined…

Open Full Question

I found ngProjectAs to be useful when I wanted to project an ng-container with a certain selector.

@Component({
 selector: 'awesome-comp',
 template: `
  <ng-content select="[foo]"></ng-content>
 `
})
export class AwesomeComponent { }

<!-- another-awesome.component.html -->

<!-- We can avoid a redundant `div` like this one -->
<awesome-comp>
 <div foo>
  <h1> <!-- ... --> </h1>
   <p> <!-- ... --> </p>
 </div> 
</awesome-comp>

<!-- By using `ngProjectAs` -->
<awesome-comp>
 <ng-container ngProjectAs='[foo]'>
  <h1> <!-- ... --> </h1>
   <p> <!-- ... --> </p>
 </ng-container> 
</awesome-comp>