Obtain a pair of parameters from the URL

I'm encountering an issue with extracting a parameter from a URL in my form. Initially, the form linked a customer to a product using one parameter. Now, we have added another parameter to be included in the URL, but I am unable to retrieve it.

What could I be doing incorrectly? Any assistance is appreciated!

URL: http://localhost:4200/check/98712?Id=803

I can successfully extract the first parameter "98712", but not the Id.

In my app.module file:

RouterModule.forRoot([
{ path: 'check/:cust', component: CheckComponent},

I attempted adding Id there, but it did not yield results.

Even in my Check component, although I am able to extract the customer, the Id remains empty.

this.customer = this.route.snapshot.paramMap.get('cust'); 
this.Ids = this.route.snapshot.paramMap.get('Id'); //Ids since it could be several, hence the addition of Id in the URL

My routes in app-routing:

const routes: Routes = [
  { path: '', redirectTo: 'ms', pathMatch: 'full' },
  { path: 'ms', component: CheckComponent },
];


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

Please let me know if you require more code snippets.

Answer №1

The customer_id is obtained as a query parameter, therefore it must be retrieved from the queryParamMap.

this.customerId = this.route.snapshot.paramMap.get('cust'); 
this.ids = this.route.snapshot.queryParamMap.get('ids');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Logging out of an application that utilizes IdentityServer4 with ASP.NET Core MVC and Angular integration

I am encountering an issue related to the proper return to the client application after a successful logout. Before delving into the problem, let me provide some background information about my current setup: IdentityServer4 serves as the Identity Provid ...

Angular firebase Error: The parameter 'result' is missing a specified type and is implicitly assigned the 'any' type

I have encountered an issue with the code I am working on and both the result and error are throwing errors: ERROR in src/app/login/phone/phone.component.ts(48,75): error TS7006: Parameter 'result' implicitly has an 'any' type. s ...

Translating a C# ViewModel into TypeScript

Here is a C# viewmodel example: public class LoginModel { [Required(ErrorMessage = "Email is not specified")] public string Email { get; set; } [Required(ErrorMessage = "No password is specified")] [DataType(DataType.Password)] public ...

Issues with Firebase Cloud Messaging functionality in Angular 10 when in production mode

Error: Issue: The default service worker registration has failed. ServiceWorker script at https://xxxxxx/firebase-messaging-sw.js for scope https://xxxxxxxx/firebase-cloud-messaging-push-scope encountered an error during installation. (messaging/failed-ser ...

Encountering a script error when upgrading to rc4 in Angular 2

After attempting to update my Angular 2 version to 2.0.0.rc.4, I encountered a script error following npm install and npm start. Please see my package.json file below "dependencies": { "@angular/common": "2.0.0-rc.4", "@angular/core": "2.0.0-rc.4", ...

Obtaining a Bearer token in Angular 2 using a Web

I am currently working on asp.net web api and I am looking for a way to authenticate users using a bearer token. On my login page, I submit the user information and then call my communication service function: submitLogin():void{ this.user = this.l ...

Truncate a string in Kendo Grid without any white spaces

While using a Kendo-Grid for filtering, I've come across an issue where my cell does not display the full string if there is no white space. The problem can be seen in the image below: https://i.sstatic.net/0h1Sg.png For example, the string "https:/ ...

Having trouble installing the gecko driver for running protractor test scripts on Firefox browser

Looking to expand my skills with the "Protractor tool", I've successfully run test scripts in the "Chrome" browser. Now, I'm ready to tackle running tests in "Firefox," but I know I need to install the "gecko driver." Can anyone guide me on how t ...

During the ng build process, an error is encountered stating, "Cannot read the property 'kind' of undefined."

Currently, I am working on a project that requires me to utilize ng build --prod in order to build a client. However, each time I run ng build --prod, I encounter the same persistent error message: ERROR in Cannot read property 'kind' of undefin ...

Having trouble retrieving response headers in Angular 5

After sending a post request to a server, I receive a response with two crucial headers for the client: username and access-token. The Chrome debug tool's Network Tab displays the data from the response like this: https://i.sstatic.net/XN9iv.png In ...

Having difficulty implementing dynamic contentEditable for inline editing in Angular 2+

Here I am facing an issue. Below is my JSON data: data = [{ 'id':1,'name': 'mr.x', },{ 'id':2,'name': 'mr.y', },{ 'id':3,'name': 'mr.z', },{ & ...

Team members

Just started diving into Angular and practicing coding with it while following video tutorials. However, I've stumbled upon something in my code that has left me puzzled. I'm curious about the significance of the line "employees: Employee[]" in ...

The endpoint for sending a contact message at http://localhost:4200/contact/send is not found, resulting in

I have implemented a bootstrap form for email services in my angular 6 app with nodejs. I am using the nodemailer package to send emails from my app, however it is not working as expected. When I submit the form, I encounter the following error: zone.js:2 ...

Referencing 'this' in Angular and Typescript: Best practices

When setting up TypeScript in an Angular project, I use the following syntax to declare a controller: module app { class MyController { public myvar: boolean; constructor() { this.myvar= false; } } angula ...

How can I iterate over nested objects using ngFor in Angular HTML?

We have a data object stored on our server structured like this; { "NFL": { "link": "https://www.nfl.com/", "ticketPrice": 75 }, "MLB": { "link": "https:// ...

Sending an Angular2 http post request to a NodeJS server running on a separate port

My angular2 app is running on localhost:4200 and I have a nodejs server running on localhost:3000. When attempting to post data to the server using http.post, I am receiving undefined values in the req.body or req.params on the nodejs server. In the initia ...

strictNullChecks and the dissemination of null values

Considering implementing the strictNullChecks flag in a large code base presents some challenges. While it is undeniably a valuable tool, the abundance of null types in interface definitions may be impacting the code's readability. This is particularl ...

Revitalize access token with Keycloak in Javascript

I am currently working with keycloak-js version 8.0.1 and have a function called getToken that checks if the token is expired. If it is expired, the function refreshes it; otherwise, it returns the current token. The issue I am facing is that even though t ...

Tips for stopping table column width growth when an icon is inserted into a cell dynamically

In the table I have, the header is clickable and when clicked, it triggers sorting. Clicking on the header title adds an icon (ascending or descending) to the right of the title, causing the column width to increase based on the size of the icon. Refer to ...

Enhance the validation of multiple fields in Angular through asynchronous AbstractControl in groupForm

Ensuring the validity of a component is crucial. A valid component is defined by its unique brand, designation, type, reference, supplierId, and familyId. The challenge arises when one or more of these attributes are not unique. For example, if I'm ed ...