Angular router-outlet child can't fill space

Question

I have a problem with filling all available space with the router-outlet.

I use angular/flex-layout for my application. And the component loaded with the router doesn't take all available place.

<div fxLayout="column" fxFlexFill>
  <maat-top-bar></maat-top-bar>
  <router-outlet fxFlex></router-outlet>
</div>

Screenshot of app & dom

The router-outlet take space instead of child component. On screenshot the component is <maat-home></maat-home>. In the DOM tree this component is placed after the router-outlet.

What can I do so the component <maat-home></maat-home> will take the remaining space?

Thanks!

Answer 1

I found a way. The router-outlet is hidden and the component added on DOM have the attribute fxFlexFill for filling all available space.

<div fxLayout="column" fxFlexFill>
  <maat-top-bar class="top-bar"></maat-top-bar>
  <div fxFlex>
   <router-outlet class="hidden-router"></router-outlet>
  </div>
</div>

The class hidden-router

.hidden-router {
  flex: 1 1 auto;
  display: flex;
  overflow: hidden;
}

And the component

<div fxFlexFill="">
  I filling all remaining space
</div>

Answer 2

Adding fxFlex to the <router-outlet> is probably not what you want. The component added by the router is added as a sibling, not as a child of <router-outlet>