Angular : how to hide parameter in url?

Question

Here I have modeling-agency component in this component one button for route on editModelingAgency/{{elememt.userid}} click on that button this link route on specific user and link look like this /base/editModelingAgency/15 but i want to show link like this /base/editModelingAgency and hide parameter with this how it is possible ?

modeling-agency.component.html

<ng-container matColumnDef="action">
  <th mat-header-cell *matHeaderCellDef> Action </th>
   <td mat-cell *matCellDef="let element">
     <button mat-raised-button routerLink="/base/editModelingAgency/{{element.userid}}"></button>
   </td>
 </ng-container>

app-routing.modulets

const routes: Routes = [
 { path: '', redirectTo: 'login', pathMatch: 'full' },
 { path: 'login', component : LoginFormComponent },   
 { path : 'base', component : BaseComponent,canActivate : [AuthguardGuard],canActivateChild : [AuthguardGuard],runGuardsAndResolvers: 'always',
  children: [
   { path: '', redirectTo: 'dashboard', pathMatch: 'full' },    
   { path: 'dashboard', component : DashboardComponent },
   { path: 'modelingAgency', component : ModelingAgencyComponent },
   { path: 'editModelingAgency/:userid', component : EditModelingAgencyComponent },  
 ]},
   { path: '**', component : PageNotFoundComponent },   
];

Answer 1

There are a few things that you'll have to do:

1. Remove the /:userId from your editModelingAgency child route.
2. Create a service that will get and set the userId of the user to edit.
3. Inject the service both in your EditModelingAgencyComponent(to get) and in your ModelingAgencyComponent(to set)

There are also a few caveats though, the most important one would be, that you will not be able to support if the user lands directly on /base/editModelingAgency route. That being said, here's a code eg:

Your SharedService:

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';

@Injectable()
export class SharedService {

  private userId;

  set userToEdit(userId) {
    this.userId = userId;
  }

  get userToEdit() {
    return this.userId;
  }

}

Your ModelingAgencyComponent Class:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { SharedService } from '../shared.service';

@Component({...})
export class ModelingAgencyComponent {

  constructor(
    private router: Router,
    private sharedService: SharedService
  ) {}

  navigateToEdit() {
    this.sharedService.userToEdit = 15;
    this.router.navigate(['/base/editModelingAgency']);
  }

}

Your ModelingAgencyComponent Template:

<ng-container matColumnDef="action">
  <th mat-header-cell *matHeaderCellDef> Action </th>
   <td mat-cell *matCellDef="let element">
     <button mat-raised-button (click)="navigateToEdit()"></button>
   </td>
 </ng-container>

Your EditModelingAgencyComponent Class:

import { Component, OnInit } from '@angular/core';
import { SharedService } from '../shared.service';

@Component({...})
export class EditModelingAgencyComponent implements OnInit {

  userIdToEdit;

  constructor(private sharedService: SharedService) { }

  ngOnInit() {
    this.userIdToEdit = this.sharedService.userToEdit;
    console.log(`Got the userId to edit as : ${this.sharedService.userToEdit}`);
  }

}

You can refer to this Sample StackBlitz for any ref.

Answer 2

Yes,You can use some service to save the selected item from the place you are clicking on the link before routing to editModelingAgency route and loading the same in the EditModelingAgencyComponent component on loading.

Another way is to set the selected id in some localstorage so that you can use the value in the EditModelingAgencyComponent.