[Fixed] How to route a component without displaying root component

Issue

App-routing.module.ts

const routes: Routes = [
{path:'candidate', component: SearchbyNameComponent}];


CandidateList.component.html

<div class="Candidates">
  <table class="list" cellpading="0" cellspacing="0">
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Department</th>
      <th>JoiningDate</th>
    </tr>
  <tr *ngFor="let data of candidate_data">
    <td>{{data.id}}</td>
    <td>{{data.name}}</td>
    <td>{{data.department}}</td>
    <td>{{data.joining_date | date}}</td>
  </tr>
  </table>
  <div class="list-group">
    <h1>Filters</h1>
    <a [routerLink]="['/candidate']">Search by Name</a>
    <a href="#" class="list-group-item" >Search by Exp</a>
    <a href="#" class="list-group-item" >Delete</a>
  </div>
  </div>

App.component.html
<app-candidatelist></app-candidatelist>
<router-outlet></router-outlet>

while clicking on Search by Name hyperLink the URL is changing but the SearchByNameComponent is loading below the App.component.html content. How do i display only SearchbyNameComponent on click and not whole content ? target = _blank doesn’t help.

Solution

You should have another route: {path:'', component: CandidateListComponent}];
And within App.component.html keep only the <router-outlet></router-outlet> and remove the <app-candidatelist></app-candidatelist>.
If you had as you have above, when you click on Search by Name hyperLink, the candidateList would be first rendered and only then the component associated with this new route would be rendered on <router-outlet></router-outlet>.