Loading

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

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

ahmed elbarbary

6y671TypeScript

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 :

class="example-full-width">
"Enter name" [(ngModel)]="partname" >

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'}

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Veerendra Annigere6y ago
1. { path: 'overview/:partid', component: OverviewComponent },
1. import { Router, ActivatedRoute } from '@angular/router';
3. export class OverviewComponent implements OnInit {
5. constructor(private route: ActivatedRoute) {
7. }
8. ngOnInit() {
9. //access partid value i will get from URL
11. this.route.params.subscribe(param => {
12. if (param && param.partid) {
14. }
15. });
17. }

0