2
Answers

How to get id of part name searched on textbox then add to u

ahmed elbarbary

ahmed elbarbary
5y
569
1
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
  1. navbar.component.ts  
  2.   
  3. export class NavBarComponent implements OnInit {  
  4. keyword = 'name';  
  5. part = new FormControl('Air');  
  6. public parts = [  
  7.   
  8. {  
  9. id: 1,  
  10. name: 'hummer',  
  11. },  
  12. {  
  13. id: 2,  
  14. name: 'ball',  
  15. },  
  16. {  
  17. id: 3,  
  18. name: 'keys',  
  19. },  
  20. {  
  21. id: 4,  
  22. name: 'nails',  
  23. },  
  24. {  
  25. id: 5,  
  26. name: 'Air',  
  27. },  
  28. {  
  29. id: 6,  
  30. name: 'Transistor',  
  31. }  
  32.   
  33. ];  
  34. ngOnInit() {  
  35. }  
  36.   
  37. selectEvent(item)  
  38. {  
  39.   
  40. }  
  41. onFocused(e)  
  42. {  
  43.   
  44. }  
  45. onChangeSearch(search: string)  
  46. {  
  47.   
  48. }  
textbox for search
  1. navbar.component.html  
  2. <div class="autocomplete" style=" float:left;">  
  3. <ng-autocomplete  
  4. [data]="parts"  
  5. [searchKeyword]="keyword"  
  6. (selected)='selectEvent($event)'  
  7. (inputChanged)='onChangeSearch($event)'  
  8. (inputFocused)='onFocused($event)'  
  9. [itemTemplate]="itemTemplate"  
  10. [notFoundTemplate]="notFoundTemplate">  
  11. </ng-autocomplete>  
  12.   
  13. <ng-template #itemTemplate let-item>  
  14. <a [innerHTML]="item.name" > </a>  
  15. </ng-template>  
  16. <ng-template #notFoundTemplate let-notFound>  
  17. <div [innerHTML]="notFound"></div>  
  18. </ng-template>  
  19.   
  20. </div>  
  21. <button id="btnautoSearch"><i class="la la-search m-0"></i></button>  
overview.component.ts componet get partid details when pass partid
  1. export class OverviewComponent implements OnInit {  
  2.   
  3.   
  4. public companyProfile;  
  5. constructor(public partDetailsService: PartDetailsService  
  6. , public companyService: CompanyService) {  
  7.   
  8. }  
  9. ngOnInit() {  
  10. console.log('welcome overview');  
  11. // here i need to access part id from url   
  12. }  
app-routing.module.ts routing as following :
  1. const routes: Routes = [  
  2.   
  3. { path: 'overview', component: OverviewComponent },  
  4. { path: '' , redirectTo: '/overview', pathMatch: 'full'}  
Answers (2)
Next Recommended Forum