question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

It seems that ng-content replacement does not work for elements selected by element name, after RC6

See original GitHub issue
[x ] bug report

Current behavior It seems that ng-content replacement behaviour is broken on RC-6 for elements selected by element name, for example:

<ng-content select="element-name"></ng-content>

But works for

<ng-content select=".class-name"></ng-content>

Sample error message:

'modal-content' is not a known element:
1. If 'modal-content' is an Angular component, then verify that it is part of this module.
2. If 'modal-content' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("-modal title="Incluir grupo econômico" #addCustGroupDialog [approve]="approveNewCustomerGroup">
    [ERROR ->]<modal-content>
      <div class="ui fluid input">
        <input class="ui input" type="text" [(ngMo"): CustomerGroups@6:4

Expected/desired behavior Normal behaviour verified before RC6. As described in this article: https://toddmotto.com/transclusion-in-angular-2-with-ng-content

Reproduction of the problem https://plnkr.co/edit/K1UYuVEMyxmMIhmWz4nl?p=preview

What is the expected behavior? Normal behaviour verified before RC6.

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

  • Angular version: 2.0.0-rc.6
  • Browser: [Chrome 52, Firefox 48.0.2]
  • Language: [TypeScript]

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:5
  • Comments:26 (10 by maintainers)

github_iconTop GitHub Comments

9reactions
wardbellcommented, Sep 2, 2016

I suppose the compiler could see the <ng-content select="X"...> and let the 'X` tags through the element check when used in that context (and that context only).

That seems plausible. Maybe we should consider that idea. I’ll run it by some people.

6reactions
vicbcommented, Sep 1, 2016

Seems like your errors is:

'modal-content' is not a known element:
1. If 'modal-content' is an Angular component, then verify that it is part of this module.
2. If 'modal-content' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this message. ("-modal title="Incluir grupo econômico" #addCustGroupDialog [approve]="approveNewCustomerGroup">
    [ERROR ->]<modal-content>
      <div class="ui fluid input">
        <input class="ui input" type="text" [(ngMo"): CustomerGroups@6:4

if <modal-content> is an angular cmp, is should be in your test modules includes

Read more comments on GitHub >

github_iconTop Results From Across the Web

Access element replaced with ng-content - Stack Overflow
I wanted to access app-tab label attribute value, but don't know how to access it from app-tabs, that used ng-content Thank you so...
Read more >
Angular ng-content and Content Projection: A Complete Guide ...
The Key Problem With The Initial Design; Designing the Same Component Using Content Projection; How To apply styles to elements projected via ng...
Read more >
Angular 2 — Using NgContent - Medium
NgContent is a way of rendering HTML or a text node inserted between a component's opening and closing tags within the template for...
Read more >
Structural directives - Angular
This guide is about structural directives and provides conceptual information on how such directives work, how Angular interprets their shorthand syntax, ...
Read more >
Everything you need to know about ng-template, ng-content ...
These template elements only work in the presence of structural directives. Angular wraps the host element (to which the directive is ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found