How to generate URL have partid based on part name from list parts?

[ahmed elbarbary]

problem

How to generate URL have partid based on part name written on text input ?

I have input text on nvabar.Component.html write on it part name as following :

 

   <mat-form-field class="example-full-width">
    <input matInput placeholder="Enter name" [(ngModel)]="partname" >
  </mat-form-field>

I need when write on text input Transistor part then I will search on list parts and get partid =2 .

then display it in URL as following :

localhost:4200/overview?partid=2

And I can access to Overview Component

navbar.component.ts

export class NavBarComponent implements OnInit {
public parts = [


{
id: 1,
partname: 'hummer',
},
{
id: 2,
partname: 'Transistor',
},
{
id: 3,
partname: 'Air',
}


];
ngOnInit() {
}

Overview.Component.ts Compoent overview I need to access

export class OverviewComponent implements OnInit {


constructor() {


}
ngOnInit() {
//access partid value  i will get from URL
}

app-routing.module.ts represent routing as following :

const routes: Routes = [


{ path: 'overview', component: OverviewComponent },
{ path: '' , redirectTo: '/overview', pathMatch: 'full'}