javascript / intermediate
Snippet
Advanced Projection with ngProjectAs
The ngProjectAs attribute allows you to project content into a specific slot even when wrapping that content in a container like ng-container. It ensures the selector in ng-content matches correctly despite the wrapper.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
<!-- Component Template --><div class="header"><ng-content select="[card-header]"></ng-content></div><!-- Consumer Template --><ng-container ngProjectAs="[card-header]"><h3>Custom Title</h3></ng-container>
angular
Breakdown
1
select="[card-header]"
Defines an insertion point for any element with the 'card-header' attribute.
2
ngProjectAs="[card-header]"
Forces the ng-container to behave as if it had the 'card-header' attribute for projection purposes.