I am trying to Navigate to a new page on click of an icon and below is the code
this.prj = e.data.project_number;
this.router.navigateByUrl('/dashboard/ProjectShipment/634');
Instead of this hardcoded query parameter 000634
I have to pass a this.prj
in to it. My path is like below
const appRoutes: Routes = [
{
path: 'dB',
data: { title: 'Dashboard' },
children: [
{
path: 'ProjectShipment/:reportProject',
component: ProjectShipmentComponent,
data: { title: 'Project Shipment' },
}
navigate creates a new URL by applying an array of passed-in commands, a patch, to the current URL. To see the difference clearly, imagine that the current URL is '/inbox/11/messages/22(popup:compose)' . With this URL, calling router. navigateByUrl('/inbox/33/messages/44') will result in '/inbox/33/messages/44' .
Use queryParamMap to access query parameters. Another way to access query paramters in Angular is to use queryParamMap property of ActivatedRoute class, which returns an observable with a paramMap object.
Query parameters are a defined set of parameters attached to the end of a url. They are extensions of the URL that are used to help define specific content or actions based on the data being passed. To append query params to the end of a URL, a '? ' Is added followed immediately by a query parameter.
You can use 'router.navigate' instead 'router.navigateByUrl':
this.router.navigate([URL],{ queryParams: { id: this.prj });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With