How to have two levels of router-outlet in Clarity/Angular app?

user_2868835 0
Viewed 252

A Clarity/Angular newbie question...

I am following the layout model described in the Clarity docs, except that I want to introduce a router-outlet at the .content-container level, like:

<div class="main-container">
  <div class="alert alert-app-level">...</div>

  <header class="header header-6">...</header>

  <nav class="subnav">...</nav>

  <div class="content-container">
    <router-outlet></router-outlet>
  </div> 
</div>

And then below that I have a number of components that one of two layout formats...

Layout #1 - with side nav

<div class="content-container">
  <nav class="sidenav" height="100%" style="background: chartreuse">
  </nav>

  <div class="content-area" height="100%" width="100%" style="background:brown">
    <router-outlet></router-outlet>
  </div>
</div>

Layout #2 - no side nav

<div class="content-container"> 
  <div class="content-area">
    <router-outlet></router-outlet>
  </div>
</div>

I've noticed that the components injected into the content-container now longer fill all the available vertical space.

enter image description here How can I set the nav and .content-area components so that they take all up the available vertical and horizontal space?

vmware-clarity angular
3 Answers

I had the same problem. I have solved it by adding the content-container class to the component selector. In your case, you can do this:

LayoutComponent.ts

@Component({
  selector: 'app-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.scss'],
  host: {'class': 'content-container'}
})

This avoids the conflict with the tag that angular adds by default in each component.

user_102709700

I found an answer after scanning the web...

router-outlet.router-flex + * {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}


  <div class="content-container">
    <router-outlet class="router-flex"></router-outlet>
  </div>

... but really this is a 'left hand not talking to the right hand' problem for the wider Angular project. It's not credible to have a key tech like flex being undermined by the default routing system.

user_28688350

The problem is that Angular injects an additional DOM element for the host component, and it causes some breaks in layout. You shouldn't have to add a CSS hack, the Clarity website actually does something similar.

See https://github.com/vmware/clarity/blob/master/src/website/src/app/app.component.html for the app component, and depending on which route you go to, navigation is added by that route and not globally.

If you prefer to do this globally, I would manage showing and hiding the sidenav conditionally based on the current route, rather than trying to nest it inside (which breaks the DOM structure).

user_39699460
Related