Click here to Skip to main content
15,889,867 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
Hi i make local web app with angular 7
I need when write on URL

localhost:4200/overview?partid=10
routing to component overview
my Question how to make routing to be as above
so can you please help me

What I have tried:

app-routing.module.ts

import { QualificationsComponent } from './Pages/qualifications/qualifications.component';
import { FamilyComponent } from './Pages/family/family.component';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { OverviewComponent } from './Pages/overview/overview.component';
import { ManufacturingComponent } from './Pages/manufacturing/manufacturing.component';
import { PackageComponent } from './Pages/package/package.component';
import { ParametricComponent } from './Pages/parametric/parametric.component';

const routes: Routes = [
  { path: '', component: OverviewComponent },
  { path: 'overview', component: OverviewComponent },
  { path: 'family', component: FamilyComponent },
  {path:'manufacturing',component:ManufacturingComponent},
  {path:'package',component:PackageComponent},
  {path:'parametric',component:ParametricComponent},
  {path:'qualifications',component:QualificationsComponent},
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }



import { CompanyService } from './../../service/company.service';
import { Component, OnInit } from '@angular/core';
import { PartDetailsService } from 'src/app/service/part-details.service';
 


@Component({
  selector: 'app-overview',
  templateUrl: './overview.component.html',
  styleUrls: ['./overview.component.css']
})
export class OverviewComponent implements OnInit {

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

  ngOnInit() {
     //How to catch or rcognize Partid=10 here on component overview 
  }
Posted
Updated 23-Dec-19 17:54pm

Hi,

You can refer Angular[^]

{ path: 'hero/:id',      component: HeroDetailComponent },


for your case,
{ path: 'overview/:partId',      component: your component},


Hope that solves your problem.
 
Share this answer
 
v3
pass the parameter through navigation :-
this.router.navigate([`/Dashboard/product/${productId}`]);


and also pass parameter through routing :-
{ path: "product/:id", component: ProductDetailComponent }
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900