IssueRaiser

Feature: Hostless components

## I'm submitting a... <pre><code> [ ] Regression [ ] Bug report [X] Feature request [ ] Documentation issue or request [ ] Support request </code></pre> ## 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 <pre><code> Angular version: 4.x.x / 5.x.x

Posted by MickL on Aug 25, 2017, 11:13 AM

Tags

Related issues

Raise real-world problems, find people facing the same issue, and discuss solutions.4,500 issues0 comments

reliability (SaaS)

Feature: Hostless components

MickLAug 25, 2017, 11:13 AM

## I'm submitting a... <pre><code> [ ] Regression [ ] Bug report [X] Feature request [ ] Documentation issue or request [ ] Support request </code></pre> ## 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 <pre><code> Angular version: 4.x.x / 5.x.x

Comments (0)

No comments yet. Start the discussion.

Comment on this issue