Angular 19 describes support for projecting multiple different elements into different <ng-content> placeholders based on 'CSS selector.' I am specifically looking at their 'Multiple content placeholders' section on this page of their angular.dev website. https://angular.dev/guide/components/content-projection They indicate that you can define a placeholder like so: <ng-content select="card-title"> and project content into like so: <custom-card> <card-title>Hello</card-title> </custom-card> However, when I try this on my own, I get "NG8001 'card-title' is not a known element." To me it seems I need to define a custom element by making a new card-title component, but the tutorial doesn't mention needing to do that. Maybe I'm misunderstanding, but I feel like the card-title element should just 'work.' Is it the case that I still need to define my own card-title component? I know that in order to get around this I can use a attributes to aid content projection: <!-- Component template --> <div class="card-shadow"> <ng-content select="[card-title]"></ng-content> <div class="card-divider"></div> <ng-content select="[card-body]"></ng-content> </div> <!-- Using the component --> <custom-card> <div card-title>Hello</div> <div card-body>Welcome to the example</div> </custom-card> (using the second option works fine and dandy) But I'm curious what I'm doing wrong in following their example? Why do I get a "NG8001 'card-title' is not a known element." error when the tutorial implies that I don't need to define new card-title and card-body components. Continue reading...
