My application's root <router-outlet></router-outlet>
will display the following component in a child Module when navigating to the '/child' route:
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.
<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?
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With