Content-Length: 314870 | pFad | https://github.com/angular/angular/issues/63321

91 multiple ng-content throws error in template · Issue #63321 · angular/angular · GitHub
Skip to content

multiple ng-content throws error in template #63321

@DuncanFaulkner

Description

@DuncanFaulkner

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:

  1. If 'card-title' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
  2. 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:

  1. If 'card-title' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
  2. 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


Metadata

Metadata

Assignees

No one assigned

    Labels

    area: docsRelated to the documentationcore: content projectionneeds: clarificationThis issue needs additional clarification from the reporter before the team can investigate.

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions









      ApplySandwichStrip

      pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier!      Saves Data!


      --- a PPN by Garber Painting Akron. With Image Size Reduction included!

      Fetched URL: https://github.com/angular/angular/issues/63321

      Alternative Proxies:

      Alternative Proxy

      pFad Proxy

      pFad v3 Proxy

      pFad v4 Proxy