3

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.

GeetT
  • 315
  • 3
  • 10
  • The example you gave works as intended. The content of the router outlet (for example, the hello component) is inside your app.component.html template, and will be displayed WITHIN the app component template. Whatever you put in your app.component template that isn't the router outlet, will always be displayed, and is persistent regardless of routing. router-outlet only affects routed elements in your route module. – Jojofoulk Sep 24 '19 at 03:32
  • I see what you are saying :) Thank you – GeetT Sep 24 '19 at 03:52

1 Answers1

3

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.

Ethan Vu
  • 2,911
  • 9
  • 25