@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]

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.