How to routes and redirects between components in Angular

Question

I am trying to navigate and redirect to specific users information page using their IDS and path them through anchor link tags by passing the id in the HTTP endpoint and retrieving it as parameter.

I succeed to get the parameter from the URL but I need to redirect to User-details.component contain only the ID of clicked link without the showing the Users-data.component in the new redirected page and the page should show back buttons to redirect to the app.component.

Users-data.component.html

<div class="mat-elevation-z8 lg-m-center">
        <table class="pd-8" mat-table [dataSource]="dataSource">
      
        
          <ng-container matColumnDef="ID">
            <th mat-header-cell *matHeaderCellDef> ID </th>
            <td mat-cell *matCellDef="let element"> <a routerLink="/details/{{element.id}}">{{element.id}}</a> </td>
          </ng-container>
        </table>
</div>

Users-data.component.ts

 constructor( private router: ActivatedRoute){}
 
  ngOnInit(){
    this.getUserList();
    console.log(this.router.snapshot.params);
  }

app-routing.module.ts

import {UsersDetailsComponent} from './users-details/users-details.component';
import {UsersDataComponent} from './users-data/users-data.component'
const routes: Routes = [
  {
    path:'user',
    component:UsersDataComponent
  },
  {
    path:'details/:id',
    component:UsersDetailsComponent
  }
];

app.component.html

<app-users-data>

</app-users-data>

<router-outlet>
    
</router-outlet>