Hard to make a new component fill the rest of body

[weidonglian]

I'm submitting a...

[ ] Bug report
[x] Feature request
[ ] Documentation issue or request

Current behavior

Router service is implemented by nesting a new component into the router-outlet part of the ShellComponent. I see the hack scss setting in shell.component.scss just to make the new component not overlapped with the app-header.
This is really hard to make the new component fill the rest area of the body.

Expected behavior

The new component will could fill the rest area of shell component without having to hack around the scss style.

A possible way is to bind the router-outlet as ng-content of ShellComponent in RouterSertice.ts if possible.
If we define ShellComponent as page template by replacing router-outlet with ng-content and wrap every component with app-shell, then it seems to work. You do not need to call RouterService.withShell, and you also have the flexibility to not add auth guard for all the component with shell component.
Yes, then you have to wrap every new component with app-shell which is also not so elegant. Another down-side is also that you can not cache the ShellComponent for each routing.

Minimal reproduction of the problem with instructions

This problem happens in the angular, material-design, flexlayout, webapp.

Environment

I upgrade to the newest version of packages. It behaves the same.

Others:

[sinedied]

This is essentially a css issue, and there are many ways around it.
I guess the css "hack" you're referring is this:

.mat-sidenav,
.mat-drawer-content,
// Force style down to child components
// See https://angular.io/guide/component-styles#deep
:host ::ng-deep .mat-drawer-backdrop {
  top: 64px;
  bottom: 0;
  left: 0;
  right: 0;
  height: auto;
  position: absolute;
}

@media ($mat-xsmall) {
  .mat-sidenav,
  .mat-drawer-content,
  :host ::ng-deep .mat-drawer-backdrop {
    top: 56px;
  }
}

This was a design choice made at a time when the fixed* options of the sidenav component were not available, you can use them like this instead now: https://stackblitz.com/angular/vrqagkvvrvb?file=app%2Fsidenav-fixed-example.html

As for the content, having it fill rest of the body is up to your design choice but it is already fixed in the (currently unreleased) next version in the master branch.
You can test it out by cloning this repo and running npm link . in it, though note that the latest angular-cli version is buggy and won't build, you need to use the previous 1.7.0 instead.

However, we are not going to change the app architecture regarding the app shell, especially considering that we will rely on it to optimize PWA performance by implementing the new App Shell option available since angular@5.1, see https://blog.angular.io/angular-5-1-more-now-available-27d372f5eb4e

[sinedied]

As a clarification, the <mat-sidenav-content> component of the new version fills the rest of the body, but it is still up to your "view" components to use up that space, using flex or position: absolution; top: 0; bottom: 0; left: 0; right: 0; for example.

[weidonglian]

Thanks for the comments. I will have a look what you suggested.

[weidonglian]

The mentioned example above:
https://stackblitz.com/angular/vrqagkvvrvb?file=app%2Fsidenav-fixed-example.html
is working great.