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