How to get id of part name searched on textbox then add to url based on list parts ?

[ahmed elbarbary]

I need when write any parts text on text box then convert name i write on text box to partid

then add to URL 

when my web app opened for first time it open like that

localhost:4200/overview

after that i write name of part on text input 

if part exist on list  parts it return id of name written

Example

user write Transistor and transistor have partid=6 on list parts

then URL will change to

localhost:4200/overview?partid=6

and after that access component overview

navbar.component.ts


export class NavBarComponent implements OnInit {
keyword = 'name';
part = new FormControl('Air');
public parts = [


{
id: 1,
name: 'hummer',
},
{
id: 2,
name: 'ball',
},
{
id: 3,
name: 'keys',
},
{
id: 4,
name: 'nails',
},
{
id: 5,
name: 'Air',
},
{
id: 6,
name: 'Transistor',
}


];
ngOnInit() {
}


selectEvent(item)
{


}
onFocused(e)
{


}
onChangeSearch(search: string)
{


}




navbar.component.html this is represent textbox i write on it part name

<div class="autocomplete" style=" float:left;">
<ng-autocomplete
[data]="parts"
[searchKeyword]="keyword"
(selected)='selectEvent($event)'
(inputChanged)='onChangeSearch($event)'
(inputFocused)='onFocused($event)'
[itemTemplate]="itemTemplate"
[notFoundTemplate]="notFoundTemplate">
</ng-autocomplete>


<ng-template #itemTemplate let-item>
<a [innerHTML]="item.name" > </a>
</ng-template>
<ng-template #notFoundTemplate let-notFound>
<div [innerHTML]="notFound"></div>
</ng-template>


</div>
<button id="btnautoSearch"><i class="la la-search m-0"></i></button>
overview.component.ts


export class OverviewComponent implements OnInit {




public companyProfile;
constructor(public partDetailsService: PartDetailsService
, public companyService: CompanyService) {


}
ngOnInit() {
console.log('welcome overview');
}


app-routing.module.ts routing as following :


const routes: Routes = [


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

to summarize what i need

actually i need to convert name to his id from list parts then add to url

then pass to component overview

url i will generate like that

localhost:4200/overview?partid=6

[ahmed elbarbary]

can any one help me if possible