CODEWITHSUNDEEP
javascriptangular
Ramki
Ramki

Reputation: 381

Angular appends to router-outlet instead of replacing content

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?

Upvotes: 0

Views: 360

Answers (1)

Prakash Harvani
Prakash Harvani

Reputation: 1041

Try This one

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

Upvotes: 1

Related Questions