Skip to content

Feature: Hostless components #18877

Open
Open
Feature: Hostless components#18877
Labels
area: coreIssues related to the framework runtimecore: host and host bindingsfeatureLabel used to distinguish feature request from other issuesfeature: under considerationFeature request for which voting has completed and the request is now under consideration
Milestone
Backlog

Description

@MickL
MickL
opened on Aug 25, 2017

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: coreIssues related to the framework runtimecore: host and host bindingsfeatureLabel used to distinguish feature request from other issuesfeature: under considerationFeature request for which voting has completed and the request is now under consideration

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions