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
- Many devs love to shit on the guy from the 'I just want the exe.
- Now imagine how poor people stress if their smartphone bricks or gets damaged or lost.
- Resuming an extended-thinking session fails permanently with 400 "thinking blocks cannot be modified" (transcript stores thinking text as empty but keeps signat
- I'll preface this with a statement that as a European I want European alternatives to succeed, and MS-owned GitHub to shrivel and disappear.
- Yeah, but there’s a world of difference between “not perfect” and “we rounded a few sliders, and now the modal is a nightmare to use”.
- I used to write a lot of native Windows corporate software in the 90's and 2000's and my standard login window was a floating draggable o...
Raise real-world problems, find people facing the same issue, and discuss solutions.4,500 issues0 comments
reliability (SaaS)
Many devs love to shit on the guy from the 'I just want the exe.
Now imagine how poor people stress if their smartphone bricks or gets damaged or lost.
Resuming an extended-thinking session fails permanently with 400 "thinking blocks cannot be modified" (transcript stores thinking text as empty but keeps signat
I'll preface this with a statement that as a European I want European alternatives to succeed, and MS-owned GitHub to shrivel and disappear.
Yeah, but there’s a world of difference between “not perfect” and “we rounded a few sliders, and now the modal is a nightmare to use”.
I used to write a lot of native Windows corporate software in the 90's and 2000's and my standard login window was a floating draggable o...
App broken with Mosquitto broker 7.0.0
[BUG] Remote Control: automatic reconnection doesn't work -- connection drops silently with no recovery
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
Comments (0)
No comments yet. Start the discussion.