@angular/elements: add support for programmatic access to content projection

[kukjevov]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[x] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

I would like to have some way how to do "templating" in custom elements and processing html content or elements defined as ContentChild or ContentChildren for Component defined as custom element. For example i have grid component that gathers metadata from its content. I would like to convert it to custom elements. Another possibility is i would like to have "custom template" for my component.

Expected behavior

I dont know how is this done in custom elements but i think it is possible somehow. I would like to have possibility to work with templates and ContentChild, ContentChildren same way as it is used in Angular.

Minimal reproduction of the problem with instructions

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

Environment

Angular version: 6.0.3


Browser: All
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX

For Tooling issues:
- Node version: 9.4.0
- Platform:  Windows

Others:

[fr0]

Is there any chance of this happening before Ivy? This is a critical feature for those of us who are wanting to expose complex custom components written in Angular via WebComponents (on the order of the Angular Material tab control).

[antch]

This is a huge blocker for many usages of elements as ShadomDom just isn't well-supported enough, besides the fact that the complete encapsulation of the slot makes it not suitable for all scenarios.

Is there any sort of workaround possible, even if it requires plugging in custom code?

[antch]

Also, it appears that if you include HTML inside of your custom element tag, it gets output as a part of the element's output, but not in a way where you can see the nodes after ngOnInit, ngAfterViewInit, or ngAfterContentInit so quite inconsistent and confusing...

Edit: This seems to occur if the Angular/CE bundle is loaded before the custom element usage in the DOM, so maybe it is expected.

[kukjevov]

Any news here @alexeagle @andrewseguin ?

It would be nice, to be able create or represent TemplateRef as function which takes context and returns HTML, because otherwise I dont know how to create template in plain javascript without this. This would allow us to use plain javascript, or handlebars or whatever to create dynamic template outside of angular. But currently it is not possible to create TemplateRef without angular since it cant be constructed from function or something similar.

Thanks

[angular-robot[bot]]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot[bot]]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

[gkalpak]

Thank you for submitting this feature request. We reviewed it and decided not to move forward with it at this time.

Content queries will not work for content outside the Angular app with our current implementation of content projection. We intend to revisit the content projection implementation as a whole at some point and potentially more closely align it with "native" content projection (via <slot> elements), which will also allow content projection to work more seamlessly for Angular Elements.

[darkguy2008]

Thank you for submitting this feature request. We reviewed it and decided not to move forward with it at this time.

Content queries will not work for content outside the Angular app with our current implementation of content projection. We intend to revisit the content projection implementation as a whole at some point and potentially more closely align it with "native" content projection (via <slot> elements), which will also allow content projection to work more seamlessly for Angular Elements.

When are you guys moving on with this request then? I've been struggling a lot trying to retrieve the elements within my web component's <ng-content> without avail. Angular is good as long as you make your entire app/framework around it, but when you want to extend it to play nice with other use-cases all we get is a brick wall, painted with "let's vote" and then "nope, not enough votes, won't do".

[gkalpak]

There is no specific timeframe atm. As much as we'd like to be able to address all issues, we have limited resources and a lot of things in the pipeline already 😞 So, we have to prioritize our work. We capture the main areas/efforts we are currently focusing on in our roadmap if you want to know more.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}