Router-Outlet Navigation With Constant Sidebar and NavBar on Angular

Question

I’m a bit confused on what to do on how to place my router-outlet. I have tried researching for similar cases but to no avail. Here is the scenario I have a dashboard component which loads after a login is successful. The dashboard contains a sidebar, footer and navigation component declared on the html. Now, when I click on a user link to show me the list of users, it loads the user component but the sidebar, footer and navigation disappears and I am left with only the user component. I just want a situation when I click on a link in the sidebar, it just changes the content without removing the sidebar, footer and nav…… PS: the user component has its own module, then I imported this into the appModule as usual.

Here is what I have so far.

app.component.html

<router-outlet></router-outlet>

dashboard.component.html

<side-bar></side-bar>
<topnav-bar></topnav-bar>
<content></content>
<footer></footer>

sidebar.component.html

 <li>
            <a id="formsli" (click)="anchorClicked($event)"
              ><i class="fa fa-user"></i> User<span class="fa fa-chevron-down"></span
            ></a>
            <ul class="nav child_menu">          
              <li><a [routerLink]="['/user/list']">User List</a></li>
              <li><a [routerLink]="['/user/new']">New User</a></li>
            </ul>
 </li>

usersRouteFile

const routes: Routes = [
    { path: 'user/list', component: UsersComponent },
    { path: 'user/new', component: UserComponent },
];

appModule

export const AppRoutes2: Routes = [
  { path: '', component: LoginComponent},
  { path: 'content', component: ContentComponent },
  { path: 'dashboard', component: DashboardComponent },
];

imports: [
      BrowserModule,
      RouterModule.forRoot(AppRoutes2, {useHash: false}),
      HttpClientModule,
      UsersModule,
   ],

If i click on the user list link, the sidebar, nav and footer disappears. I want it to remain and just change the content area.

Please, what am i doing wrong or not doing right??

Well Router Outlet replaces the components with whatever is loaded. So if navbar and sidebar aren’t part of the user component then they won’t be loaded. What you could do is load them all in the app component, either in a separate shared component or individually or one by one and use an ngif directive to show or hide the common components only if a user is logged in outside of the router outlet — Pari Baker

Pari Baker Pari Baker · Accepted Answer · 2019-07-16T12:46:48

App.component.html

     //use the ngIf directive to either create or destroy the div with       static content (this is determined from the app.component.ta
      <div class='user-nav' *ngIf="isLoggedIn">
          <side-bar></side-bar>
          <top-navbar></top-navbar>
       </div>
     //anything that is routed will show up here
       <router-outlet></router-outlet>
    //if you want the footer to only be available after logging in add it here too
       <footer></footer>

Router-Outlet Navigation With Constant Sidebar and NavBar on Angular

1 Answers