Feature: Hostless components #18877
Description
I'm submitting a...
[ ] Regression
[ ] Bug report
[X] Feature request
[ ] Documentation issue or request
[ ] Support request
Current behavior
Component-containers like <app-root>, <app-hero-list>, etc. do break flex layout.
Expected behavior
A component(or whole module) should have the option to create no html-element. Instead Angular should work with comments instead of html-elements, exactly like ng-container.
Minimal reproduction of the problem with instructions
<html style="width: 100%; height: 100%;">
<body style="width: 100%; height: 100%; display: flex; flex-direction: column;">
<app-root>
<div style="flex: 1; background: lightcoral;">I should have full height!</div>
</app-root>
</body>
</html>
Plunker: https://plnkr.co/edit/aOWUciRx2EsRsKwL2zma?p=preview
(Uncomment app-root in styles.css to see currently needed fix)
What is the motivation / use case for changing the behavior?
Using display:flex only affects the child-element which gets broken by any <app-component> tag. To apply the example above with multiple nested components to require ugly, hardcoded stylesheets:
body,
app-root,
app-hero,
app-hero-list,
app-hero-detail {
display: flex;
flex-direction: column;
}
Also, as a frontend developer, i don't like the <app-component> tags either :D
Environment
Angular version: 4.x.x / 5.x.x