TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
ahmed elbarbary
NA
1.6k
278.3k
How to get id of part name searched on textbox then add to u
Dec 21 2019 5:12 PM
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)
{
}
textbox for search
navbar.component.html
<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 componet get partid details when pass partid
export
class
OverviewComponent
implements
OnInit {
public
companyProfile;
constructor(
public
partDetailsService: PartDetailsService
,
public
companyService: CompanyService) {
}
ngOnInit() {
console.log(
'welcome overview'
);
// here i need to access part id from url
}
app-routing.module.ts routing as following :
const
routes: Routes = [
{ path:
'overview'
, component: OverviewComponent },
{ path:
''
, redirectTo:
'/overview'
, pathMatch:
'full'
}
Reply
Answers (
2
)
I need to access component when click link but not change UR
How to generate URL have partid based on part name from list