How to allow routing to localhost:4200/overview?partid=10

[ahmed elbarbary]

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

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 

  }

[ahmed elbarbary]

بتاريخ الأربعاء، 18 ديسمبر، 2019 10:19:27 م UTC+2، كتب ahmed elbarbary:

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

app-routing.module.ts

[Thang Le Duc]

Use this  

this.router.navigate(['/ overview '], { queryParams: {  partid  : 10 } });  

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/angular/0cb8d9a7-1a9e-4bff-942e-9ff14d6870d4%40googlegroups.com.

--

Thanks and Best Regards

Thang Le Duc

Rikkeisoft Co., Ltd.

Mobile: 0935334983

Skype: ducthang237

Email: thangld@rikkeisoft.com

--------------------------------------------

Head Office:. 3rd Floor, HH3 Bldg., Me Tri St., Nam Tu Liem Dist., Hanoi

            . 11th Floor, VietNam News Agency Build., 81 Quang Trung St., Hai Chau Dist., Da Nang City

            . 3rd Floor, Ishige Bldg., 4-9-3 Shiba., Minato-ku., Tokyo., Japan

Tel: (+84) 236 3962 685

Page: https://www.facebook.com/rikkeisoft?fref=ts

Website: http://rikkeisoft.com/

[Thang Le Duc]

Use this  

this.router.navigate(['/ overview '], { queryParams: {  partid  : 10 } });  

[ahmed elbarbary]

thank you for reply

can you please  tell me how to write 

question mark ? after overview 

and how to do partid=values

[Olaleye Israel]

In the definition of your routes you do not need specify a queryParam but you need specify for a param like {path: 'overview/:id'}. see thangs reply for navigating to the route. also, i encourage visiting the documentation on router https://angular.io/guide/router

[Olaleye Israel]

you need some imports: ActivatedRoute, ActivatedRouteSnapshot from @angular/router

instantiate like this private activatedRoute: ActivatedRoute in your constructor

do:

this.activateRoute.queryParams.sucbscribe(

)