-
Notifications
You must be signed in to change notification settings - Fork 26.6k
Description
Describe the problem that you experienced
The documentation for ng-content shows it set up as follows:
<!-- 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>
And to use the above component like so:
<!-- Using the component -->
<custom-card>
<card-title>Hello</card-title>
<card-body>Welcome to the example</card-body>
</custom-card>
when I've tried this in my ow project (and using the above code as well as my own) the component using the component throws an error in the template saying:
'card-title' is not a known element:
- If 'card-title' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
- If 'card-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.ngtsc(-998001)
the only way I've got this to work is to change the component to:
<custom-card>
<div card-title>Hello</div>
<div card-body>Welcome to the example</div>
</custom-card>
Before I submit a PR to update the documentation I wanted to check to see if this is correct and the documentation is wrong (it may have worked like the documentation suggests in a previous version).
Or I've completely missed something and the documentation is correct
Enter the URL of the topic with the problem
https://angular.dev/guide/components/content-projection
Describe what you were looking for in the documentation
How to use multiple ng-contents in a component
Describe the actions that led you to experience the problem
components using multiple ng-contents throws error in template
'card-title' is not a known element:
- If 'card-title' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
- If 'card-title' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.ngtsc(-998001)
Describe what you want to experience that would fix the problem
A working set of examples
Add a screenshot if that helps illustrate the problem
No response
If this problem caused an exception or error, please paste it here
If the problem is browser-specific, please specify the device, OS, browser, and version
Provide any additional information here in as much as detail as you can