Angular appends to router-outlet instead of replacing content

Question

Am learning Angular, When I use the routerLink or this.router.navigate the component is simply appending to router-outlet instead of replacing the content. This is my code

app-routing-module

const routes: Routes = [
  {path: 'Billing', component: BillingComponent},
  {path: 'BillDisplay', component: BillDisplayComponent}
];

app.component.module.html

<a routerLink="/Billing">
    Go to Billing
</a>
<router-outlet>
</router-outlet>

when I click on the link on the rendered page, I get the billing page with screwed up Jquery, but I try giving the same URL directly in the browser, http://localhost:4200/billing, the page displays fine. Also, I have a button on billing,

billing.component.html

<input type="button" (click)="navigateTo()" value="Submit">

billing.component.ts

navigateTo(): void {
    this.router.navigate(['/BillDisplay']);
  }

now when I click on the button, the content of billdisplay displays in the same page appended to billing like below.

contents of app.component.html
contents of billing.component.html
contents of billdisplay.html

Why is the navigation not replacing the contents?

Can you please provide images? It will help understand the problem a lot better. — Pawan Sharma
Post more code , not clear what you are asking. Html and js of your component and your routing — Rashmi Kumari

Prakash Harvani Prakash Harvani · Accepted Answer · 2020-10-17T15:38:43

Try This one

 this.router.navigateByUrl('/', { skipLocationChange: true }).then(() =>{
          this.router.navigate(['/BillDisplay']);
        })

Angular appends to router-outlet instead of replacing content

1 Answers