I wanted to implement routing in such a way that if you click on the dropdown it goes to that particular page. But i want the header to remain while routing to other ponents.It is going to the particular url but it isn't showing the content.I have tried child routing but it doesn't seem to work.

The above picuture is how the dropdown looks like. It has the following url

localhost:4200/body

when i click on the user management I want it to go to

localhost:4200/body/user

Though it goes to the particular url it doesn't show any content below as in the picture.

These are my codes (app.routing.ts and .html)

I wanted to implement routing in such a way that if you click on the dropdown it goes to that particular page. But i want the header to remain while routing to other ponents.It is going to the particular url but it isn't showing the content.I have tried child routing but it doesn't seem to work.

The above picuture is how the dropdown looks like. It has the following url

localhost:4200/body

when i click on the user management I want it to go to

localhost:4200/body/user

Though it goes to the particular url it doesn't show any content below as in the picture.

These are my codes (app.routing.ts and .html)

• javascript
• angular
• angular6
• angular-routing

• 4 Please post your code and not image. Please take a look stackoverflow./help/how-to-ask – Pratap A.K Commented Sep 27, 2018 at 12:26
• Please create a stackblitz code. – Suresh Kumar Ariya Commented Sep 27, 2018 at 12:33

5 Answers 5

I think you forgot to add <router-outlet></router-outlet> in your BodyComponent html. add it's all of your code seems fine

This is what happened to me: Since it wasn't working, I tried to see if it gives an error if I remove

<router-outlet></router-outlet>

It didn't. But then I pasted back, and it worked!!! Could have been a caching problem?!?

For me, I added a route like:

{ path: '/', ponent: HomeComponent }

and the browser console threw error

Invalid configuration of route '/': path cannot start with a slash

So I replaced that with:

{ path: 'home', ponent: HomeComponent },
{ path: '', redirectTo: 'home', pathMatch: 'full' }

Lesson learnt: Keep an eye on the Browser console

Accordinh tonthe doc

const crisisCenterRoutes: Routes = [   {
    path: 'crisis-center',
    ponent: CrisisCenterComponent,
    children: [
      {
        path: '',
        ponent: CrisisListComponent,
        children: [
          {
            path: ':id',
            ponent: CrisisDetailComponent
          },
          {
            path: '',
            ponent: CrisisCenterHomeComponent
          }
        ]
      }
    ]   } ];

So for your case you will have :

{ path: 'body', ponent:      BodyComponent, children: [ { path: '', redirectTo: 'user', pathMatch: 'full' }, { path: 'user', ponent: UserComponent } ] }

If you have nested routes you have to have nested router outlet:

{ path: 'user', ponent: LoginViewComponent,
    children: [
      { path: 'catalog', ponent: CatalogViewComponent },
      {
        path: 'home',  ponent: HomeViewComponent,
      }
    ]
},      
{ path: '**', redirectTo: 'user' }

Then:

<div class="container">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
      <span class="caret"></span></button>
      <ul class="dropdown-menu">
        <li><a routerLinkActive="active" 
          routerLink="/user">Login</a></li>
        <li> <a routerLinkActive="active" 
          routerLink="/user/home">Home</a></li>
        <li> <a routerLinkActive="active" 
          routerLink="/user/catalog">Catalog</a></li>
      </ul>
    </div>
    <router-outlet></router-outlet>
  </div>

And in your child ponent:

<h1>Login</h1>
<router-outlet></router-outlet>

I created a working example here.