routing in angular 5 : load component in part of page

Issue

i have one component for sidebar , when user click on one of options load component in part of page .

but when i click on options load new component in all of page .

how can i solve this problem ?

    <div>
<ul nz-menu [nzMode]="'inline'" style="width: 240px;" [nzTheme]="theme?'dark':'dark'">
  <li nz-submenu nzOpen>
    <span title><i class="anticon anticon-mail"></i>  Letter </span>
    <ul>
      <li nz-menu-group>
        <ul>
          <li nz-menu-item><a [routerLink]="['/Inbox']">Inbox &nbsp;&nbsp;<nz-badge [nzCount]="555"></nz-badge>
            </a></li>
          <li nz-menu-item><a [routerLink]="['/Drafts']">Drafts</a></li>
          <li nz-menu-item><a [routerLink]="['/NewLetter']">Write Letter</a></li>
          <li nz-menu-item><a [routerLink]="['/ListLetter']">List Letter</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
</div>
<div class="container">
  <router-outlet></router-outlet>
</div>

Route:

    const routes: Routes = [
  {path: 'Inbox', component: InboxComponent},
  {path: 'Profile', component: ProfileComponent},
  {path: 'NewLetter', component: CreateLetterComponent},
  {path: 'Drafts', component: DraftsComponent},
  {path: 'ListLetter', component: ListLetterComponent},
  {path: '', redirectTo: 'Inbox' +
    '', pathMatch: 'full'}
];

Image : I need load component in part of page

Solution

Look at the offical tutorial. I think you want to have a <nav> tag where you specify the sidebar.

Also – is that the app.component.html you linked? Are you sure, you did not specify more <router-outlet>s by chance?

Answered By – ForestG

Answer Checked By – Terry (AngularFixing Volunteer)