Angular newbie layout question. I'd like all content in app.component.html to be replaced with the content of the selected component when an item in my navigationComponent is clicked. With the way I have laid it out, the selected component content will simply be appended to the existing content of app.component.html. How do I go about achieving this?
Is the pattern simply to have <router-outlet></router-outlet> in app.component.html and in the constructor of app.component.ts, load in component1 and component2 programmatically and push my example text to a component also so it can be loaded in?
Thanks
index.html
<app-root><app-root>
app.component.html
<navigationComponent></navigationComponent>
Some example text that should also be replaced when a navigation component is selected
<component1></component1>
<component2></component2>
<router-outlet></router-outlet>
navigation.component.html
...
<a routerLink="/component1">component1</a>
<a routerLink="/component2">component2</a>
<a routerLink="/component3">component3</a>
<a routerLink="/component4">component4</a>
<a routerLink="/component5">component5</a>
