CODEWITHSUNDEEP
angularrouter-outlet
GeetT
GeetT

Reputation: 315

Angular appends component instead of replacing whole page using router-outlet

First of all. I have checked all similar questions and its accepted answers in stackoverflow but did not work any. I am using Angular 8.1.3

So the problem is when I click on routerLink it just appends my component on existing component but it should not append it should replace whole screen with the new component. I tried by removing BrowserAnimationsModule but did not help.

I have create one small app in stackblitz, please have a look https://stackblitz.com/edit/angular-a8lmjs. Here I am able to reproduce the problem.

Upvotes: 3

Views: 2129

Answers (1)

Ethan Vu
Ethan Vu

Reputation: 2987

That is the normal behavior of the router outlet. The AppComponent is hosting the router-outlet and it's element so it will display both it's elements and component appended by router-outlet that match the defined routes.

Also, it important to know that AppComponent is Angular's default boostraped component, which mean it always be loaded into index.htlm 's app root by defaul.

So, if you wish to archive what you decsribing, then you should place only router-outlet inside AppComponent, and create another component to host the removed elements.

Upvotes: 3

Related Questions