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

Question

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.

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.

That's just how router-outlet works, put a container wrapper around the router-outlet and style that — Toxicable
– Toxicable, Commented Sep 7, 2017 at 20:17

wheeler · Accepted Answer · 2017-09-07 20:53:26Z

0

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>

edited Sep 7, 2017 at 20:53

answered Sep 7, 2017 at 20:20

wheeler

6978 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Denis Stephanov Over a year ago

check my update please, I tried it, and not works, blank area is smaller but is still there.

Denis Stephanov Over a year ago

maybe yes, but I'm actually trying solve this issues, because I do not want mix it in one tread.

wheeler Over a year ago

I believe the "nav" class in the <ul> makes up for the width. Try remove it plz.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related