Angular routerLink is appending the route-outlet insteading of replacing

Question

I am learning Angular and TypeScript. Now I am developing a simple application just for learning purpose. I am having a problem with routeLink. One of my routeLink is adding new HTML to the existing one instead of replacing it. I have a complicated component tree view and structure.

This is my main app-routing.module:

const routes: Routes = [
    { path: '', loadChildren: './layout/layout.module#LayoutModule', canActivate: [AuthGuard] }
];

My app.component.html:

<router-outlet></router-outlet>

So I will have the independent LayoutModule and its routing configuration:

const routes: Routes = [
    {
        path: '',
        component: LayoutComponent,
        children: [
             { path: 'outcome', loadChildren: './outcome/outcome.module#OutcomeModule' }
        ]
    }
];

My html for layout.component

<app-header></app-header>
<app-sidebar></app-sidebar>
<section class="main-container">
    <router-outlet></router-outlet>
</section>

So again, I will have the outcome module and its routing configuration.

This is my outcome-routing.module configuration:

 {
    path: '',
        component: OutcomeComponent,
        children: [
            { path: '', redirectTo: 'list' },
            { path: 'list', component: ListOutcomeComponent },
            { path: 'add', component: CreateOutcomeComponent }
        ]
  },

This is my outcome.component.html:

<div [@routerTransition]>
  <h2 class="text-muted">Page Title
    <small>This is small title</small>
  </h2>
  <router-outlet></router-outlet>
</div>

So according to my code, if I access to "outcome/add" and "outcome/list", it will use the respective component. My route configuration is still working perfectly until at this stage. When I access the "outcome/add" url, the route-outlet in the outcome.component.html is replaces with CreateOutcomeComponent and ListOutcomeComponent for "outcome/list". The problem begins in the ListOutComponent.

This is my create-outcome.component.html

<div>
    <h1>Add/create new outcome</h1>
</div>

This is my list-outcome.component.html

<div class="row">
<div class="col-md-12">
<a class="btn btn-primary" [routerLink]="['/outcome','add']">Add new outcome <i class="fa fa-plus"></i></a>
</div>
</div>

As you can see, I created a link (routerLink) in the list-outcome.component.html that is navigating to the "outcome/add". So if I click on that link, current existing whole content is supposed to replaced with the HTML content of CreateOutcomeComponent including the link (anchor) itself. But when I click on the link, content is not replaced, instead, it is appended or prepended to the existing content.

This is what I see, when I access to "outcome/list":

If I click on the button, it is supposed to be replaced with content from CreateOutcomeComponent. But this happened, when I did.

As you can see in the screenshots, content is added to the top of the existing content. But it should be replaced. Why is this? How can I solve the issue?

But when I access the "outcome/add" directly from the URL entering into the browser, it is working as expected like this.