Search code examples
javascriptangularangular-routerrouter-outlet

Angular 4 - Why router-outlet element does not contain rendered component?

I have in my angular app routing, and I need dynamically render components in router-outlet element. I need style router-outlet as container of rendered components, but when I set him width, all content will be pushed, and I find out it is not in router-outlet as you can see on picture.

enter image description here

App-messenger tag should be in router-outlet.

Here is my home component which contains router-outlet:

<div class="container-fluid h-100 d-flex">
  <div class="d-flex h-100">
    <app-navbar class="flex-column h-100 flex-fixed-column-100"></app-navbar>
  </div>
    <router-outlet class="d-flex w-100"></router-outlet>
</div>

and router configuration:

const appRouter: Routes = [
  { path: '',
    component: AuthComponent,
    children: [
      { path: '', component: SignInComponent },
      { path: 'sign-up', component: SignUpComponent }
    ]},
  { path: 'home', component: HomeComponent,
    children: [
      { path: '', component: MessengerComponent},
      { path: 'posts', component: UsersPostsListComponent },
      { path: 'contacs', component: ContactsListComponent }
    ]},
  { path: '**', redirectTo: '', pathMatch: 'full' }
];

EDIT

I've also tried wrap router-outlet, but also my content was pushed, and I d not know as you can see on second picture. I do not have any other styles except for bootstrap classes which you can see.

enter image description here

Solution

  • thats normal behaviour. router-outlet is not the parent element of the content. You need some wrapping around it. 

        <div class="container-fluid h-100 d-flex">
      <div class="d-flex h-100">
        <app-navbar class="flex-column h-100 flex-fixed-column-100"></app-navbar>
      </div>
      <div class="d-flex w-100">
        <router-outlet></router-outlet>
      </div
    </div>

    EDIT: Try adding flex-column on the UL Element like this

    <div class="container-fluid h-100 d-flex">
  <div class="d-flex h-100">
    <app-navbar class="flex-column h-100 flex-fixed-column-100">
      <ul class="nav flex-column h-100 side-navbar justify-content-center align-content-start">
        <li class="nav-item">Item 1</li>
        <li  class="nav-item">Item 2</li>
        <li  class="nav-item">Item 3</li>      
      </ul>
    </app-navbar>
  </div>
    <div class="d-flex w-100">
     <router-outlet></router-outlet>
      <div class="w-100">
          Right Content
      </div>
    </div>
</div>