Feature Request: Fragments Components (like ng-container)

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[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

Current behavior

Every custom component that you can make with Angular are nodes in the document as a new tag.

Expected behavior

I would like a way to create a custom component that does not show it self in the document tree, but only it’s content.

Just like ng-container tag does.

Minimal reproduction of the problem with instructions

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

• Libraries like Angular Material needs for some of their components needs to be child of each other.
• NativeScript use a special XML syntax to define their components
• Any other Framework with a special requirement to work properly.

With Fragments we could be able to create new components that fits the needs of the application and insert them knowing that when they are applied they would insert the template they are declaring, but no themselves.

Environment

Angular version: 5.2.3


Browser:
- [ ] 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: XX  
- Platform:  

Others:

Related:

• Current Angular tags that disappears when are applied:
  • ng-container
• Issues
  • #7857
• Other SPA Platforms:
  • React Fragments

Declaration suggestion:

This could be just a new property in the @Component declaration. Like a boolean. Or another decorator just for this propuse.

Implementation suggestion:

Some of the concerns about this is, styles and classes names, and where to applied them. But currently with the Shadow DOM emulation a new attribute is added to the children of the component, so this could be mean that their styles will still being the same.

If the developer declare styles to the component using host pseudo selector, this would create a new Shadow DOM. And that styles should be applied as-is declared. Angular should not try to figure out what the developer would want.

If the developer apply styles or classes names a fragment tag this should be ignored, cause the element would disappear. This should be the expected behavior.

Fragment should only allow attributes that are declared as @Input properties, effectively ignoring and throwing any other valid attribute.

[IgorMinar]

This is already possible via lower level apis - a component can define a template with embedded templates and those can then be used be instantiated and projected into any view container.

What we are missing is a declarative way to define these fragments without the need for involving all of the low level apis.

[trotyl]

@michaeljota Not like my example, that has been commented already. Styles are all static to Renderer and only applied once, just not possible to achieve that in current architecture. There could not even be a “what if”.