How can I completely replace the app component html in Angular

Question

How can we completely replace the app component html with another component html?

I tried using routerlink to display another html in the app component html(root html).Below is the code in appcomponent html.

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href=#>Log In</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href=#>Sign Up</a></h2>
  </li>
  <li>
    <h2><a target="_parent" rel="noopener" routerLink="/dashboard">Continue</a></h2>
  </li>
  <li>
<h2><a target="_parent" rel="noopener" href="https://blog.angular.io/">Test</a></h2>
  </li>
</ul>
<router-outlet></router-outlet>

When I click "Conitnue", the dashboard html is appended in the area, but what I expect is dashboard html completely overlap the contents of app component html.

Could you please tell me how to do it? Thanks

Answer 1

You can try creating a new component by adding the above content to a new HTML named navigation and place that whenever you needed

Kep you app.component.html empty as possible