Angular2 router-outlet outputs component into ng-component

Question

In Angular2 app I use Bootstrap's grid. Module's main component's template provides a grid's row:

<div class="row">
    <router-outlet></router-outlet>
</div>

And sub-components have Bootstrap's grid's columns:

<div class="col-md-8">Hello, world!</div>
<div class="col-md-4"></div>

The problem is Angular2 generates such a HTML:

<div class="row">
    <router-outlet></router-outlet>
    <ng-component>
        <div class="col-md-8">Hello, world!</div>
        <div class="col-md-4"></div>
    </ng-component>
</div>

So: it adds an ng-component tag, which breaks the structure, required by Bootstrap (the column block must be a child of a row block).

How can I prevent generation of the ng-component tag?

You wouldn't have this problem if it was using `ng-container` instead of `ng-component`. AFAIK `ng-component` is meant for internal use only but it's very easy to confuse them. But you didn't say what library you were actually using. — Simon_Weaver, Aug 29 '19 at 03:59
https://caniuse.com/css-display-contents is a theoretical solution — Simon_Weaver, Jan 05 '21 at 02:02

score 1 · Answer 1 · answered Jul 06 '17 at 01:01

1

This is happening because of .row class. It has an property of display:flex which is a container of flex items.

In this case <ng-componet> is now become a flex item and start having the default properties of flex items.

I will suggest you to change you HTML construction for now may be bootstrap team will fix this.

To get more info about default properties flex item you can click here.

answered Jul 06 '17 at 01:01

Ashwani Kumar

216
2
14

It's true the problem is due to the flex display. However, I can't change my construction because I'm using some UI libraries. – Fiona Mar 11 '18 at 23:27

JoMendez · Answer 2 · 2019-11-25T17:02:54.047

This happen automatically, angular generates ng-component after a router-outlet and it has nothing to do with the use of css flex.

ng-component is the default tag name of the injected element, if another directive isn't given. as stated here https://stackoverflow.com/a/57702912/4320602

From https://medium.com/angular-in-depth/angular-router-series-secondary-outlets-primer-139206595e2

<router-outlet></router-outlet>
<ng-component>Routed components go here</ng-component>

Technically, the router will place the routed components just after the router-outlet, within an element. This happens automatically, so you don’t actually type the element.

More info here: https://www.bennadel.com/blog/3350-routable-view-components-don-t-need-selectors-in-angular-4-4-4---but-they-may-be-helpful.htm

Maybe a work around could be:

<router-outlet></router-outlet>

And sub-components have Bootstrap's grid's columns:

  <div class="row">
    <div class="col-md-8">Hello, world!</div>
    <div class="col-md-4"></div>
  </div

So angular generates this HTML:

    <router-outlet></router-outlet>
    <ng-component>
      <div class="row">
        <div class="col-md-8">Hello, world!</div>
        <div class="col-md-4"></div>
      </div>
    </ng-component>

Deilon Cutamora · Answer 3 · 2019-12-18T13:27:44.100

0

Keep your <div class="rows"> wrap in router-outlet

<router-outlet> <div class="rows">...</div> </router-outlet>

Considering the <div class="rows"> is outsourced from another folder

edited Dec 18 '19 at 13:27

answered Dec 05 '19 at 07:47

Deilon Cutamora

1
1

score -3 · Answer 4 · answered May 07 '17 at 10:41

-3

No it is not possible and it should not affect your styles.

answered May 07 '17 at 10:41

Jorawar Singh

7,463
4
26
39

Well, it does affect my styles :( If, via Chrome dev tools, I move contents of ng-component outside of ng-component - grid starts to behave as it should. ng-component definitely breaks the layout. – Dima May 07 '17 at 10:43
No. It does break my layout. – Fiona Mar 09 '18 at 06:09

Angular2 router-outlet outputs component into ng-component

4 Answers4