Why new component opening in the same page

Question

I am new to Angular, I have created very simple application with two component, I just want to navigate from one to another.

But second components opens in same(below the 1st) component. How can I open 2nd comp. in new page?

This is my code

<td> <a routerLink="devicelist">Privacy Policy</a> </td>
<div>
  <router-outlet></router-outlet>
</div>

app-route.module.ts file

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductsComponent } from './products/products.component';
import { DeviceListComponent } from './device-list/device-list.component';

const routes: Routes = [
  { path: 'devicelist', component: DeviceListComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],

})
export class AppRoutingModule { }

Edit: 1

app.component.html

<router-outlet></router-outlet>

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ProductsComponent } from './products/products.component';
import { DeviceListComponent } from './device-list/device-list.component';

const routes: Routes = [
  {
    path: '',
    component: ProductsComponent,
  },
  { path: 'devicelist', component: DeviceListComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule { }

Comp1 file

<div>
    <style>
        table {
          font-family: arial, sans-serif;
          border-collapse: collapse;
          width: 100%;
        }

        td, th {
          border: 1px solid #dddddd;
          text-align: left;
          padding: 8px;
        }

        tr:nth-child(even) {
          background-color: #dddddd;
        }
        </style>
    <table >
        <tr >
          <th>Product Name </th>
          <th>Compliance</th>
          <th>Failed</th>
          <th>Inprogress</th>
          <th>Reprocess</th>
        </tr>
        <tr>           
            <td>Connected Courrier</td>
            <td> <a routerLink="devicelist">Privacy Policy</a> </td>
            <td>Failed</td>
            <td>Inprogress</td>
            <td>Reprocess </td>
        </tr>

        <tr>           
            <td>Admin App</td>
            <td>20</td>
            <td>Failed</td>
            <td>Inprogress</td>
            <td>Reprocess </td>
        </tr>

      </table>

    </div>

Comp2 file

<div>
    <p>device-list works!</p>
</div>

Answer 1

you have placed <router-outlet></router-outlet> inside the first component.so whenever you navigate to the second component it will render inside the first component.

Note: Place <router-outlet></router-outlet> in the app.component.html and create two separate components then will work