Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular component inside of router-outlet on child route will not fill available space

My application's root <router-outlet></router-outlet> will display the following component in a child Module when navigating to the '/child' route:

child.component.ts

import {Component} from "@angular/core";

@Component({
  template: `
    <div style="display:flex; width: 100%; height: 100%;">
      <custom-sidebar-component></custom-sidebar-component>
      <router-outlet></router-outlet>
    </div>`
})
export class ChildComponent {
}

Now this component displays just fine and fills the entire screen as I expected. However, when I attempt to navigate to a child route of this module, say to '/child/home', I expect the following HTML to display in the child <router-outlet></router-outlet> seen in the component template above.

child-home.component.html

<style>
  .parent-style {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    height: 100%;
  }

  .box-style {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    background: red;
    color: white;
    border: 1px solid black;
  }
</style>
<div class="parent-style">
  <div class="box-style">Box 1</div>
  <div class="box-style">Box 2</div>
</div>

But this time the contents of the router-outlet do not fill the available space as I was hoping. The only way I have been able to see the results I want is to open dev tools and edit the Angular generated _nghost attribute wrapping my component. How can I get my component to fill available space?

This is what I expect

expected

This is what I actually get

enter image description here

like image 682
Lord Arryn Avatar asked Jul 08 '17 00:07

Lord Arryn


1 Answers

That's because rendered DOM was as below:

<app-child  _nghost-c1="">
<div _ngcontent-c1="" class="parent-style">
<div _ngcontent-c1="" class="box-style">Box 1</div>
<div _ngcontent-c1="" class="box-style">Box 2</div></div>
</app-child>

so the solution was quite simple, add some styles to the host element ,you can use host:{'class':'foo'} or directly add host:{'style':'width:100%'} in the @Component{} of your ChildComponent

like image 148
constlhq Avatar answered Sep 27 '22 19:09

constlhq