Unable to retrieve route parameters in Angular 2

I have a scenario similar to this

<a [routerLink]=" ['../projects', project.id] ">

However, when attempting to retrieve a route parameter from the URL, I am not getting any results.

Here is my import:

import { Component} from '@angular/core';
import { ActivatedRoute } from '@angular/router';

This is my constructor:

constructor(private route: ActivatedRoute) {}

And here is how I handle it in ngOnInit:

  ngOnInit() {

    this.sub = this.route.params.subscribe(params => {
      console.log(params); //only receiving an empty Object with `__proto__`
    });
  }
}

Can anyone offer me some assistance with this issue?

Answer №1

Access the route parameter using snapshot in Angular.

 const userId = +this.route.snapshot.params['userId'];
// perform operations with the retrieved user ID

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

I encountered an issue while using the tab bar feature in Bootstrap where I wasn't able to navigate back to the first tab or any

My current project involves JavaScript, and I integrated a Bootstrap tab bar component. However, when I try to run the code in Google Chrome, I encounter an issue. The first time I select the first tab, the content displays correctly. But when I select the ...

Tips for importing queries from a .graphql file using Angular and TypeScript

I am currently developing an app using Angular and Ionic. For the backend, I have set up a node server running ApolloServer with Neo4j (utilizing grandstarter.io). On the frontend, I have a file named queries.ts where I define my graphql queries in the fol ...

Creating a Piechart in Kendo UI that is bound to hierarchal remote data

I am facing an issue with binding remote data to a pie chart while managing a grid with dropdown sorting options. The grid is working fine, but I am unable to display the hierarchical data on the pie chart as categories. <!DOCTYPE html> <html> ...

"Encountered a 404 error while making an AJAX call in

Utilizing ajax to gather information from an enquiry form, the data is then forwarded to another page which should in turn send this data to my email. The issue arises when clicking the send button as a 404 error is displayed in the firebug console. Wi ...

Set up a timed event for a .js file to execute

I am currently exploring options for automatically running a JavaScript file multiple times per day, similar to Task Scheduler on Windows. Right now, I manually run the file in VS Code or Command Prompt using the command "node file.js". Is there a way to a ...

Express.js app was terminated due to a setTimeout callback function

I have a quick question. router.get('/', function(req, res, next) { throw new Error('123') res.send('respond with a resource'); }); When I try to use this code in an express project, it throws the error I expected. Howev ...

Why is my return statement in JavaScript Nextjs mapping values twice?

I am running into an issue where my code is displaying the output twice, and I can't seem to figure out why. Any assistance would be greatly appreciated. Here is a link to the current output that I am receiving. I suspect that the problem lies in sett ...

Using Angular Material to dynamically hide columns in a table that is being created on the fly

Is there a way to hide columns in my table based on the ID value sent to the page upon opening it? While researching, I found a method for tables with dynamically generated columns in this post: https://github.com/angular/components/issues/9940. However, t ...

Using "this" in callback functions in JS references the current context

Part 1: Is there a way to reference a parent property dynamically from within a callback? Consider the following scenario: var someClass = { htmlClass : 'aFunClass', bindEvents: function(){ jQuery(function(){ alert( th ...

Displaying only the most recent 5 messages using *ngFor

I'm facing a situation where my *ngFor loops through incoming messages in this structure. <ul id="messages"> <li *ngFor="let message of messages; let i = index"> <span id="actualMessage" [innerHTML] ...

Displaying nested data on an Angular 8 table

Hello everyone, I am currently dealing with an HTTP response from a MongoDB and extracting values like: loadOrders(){ this.orderService.getOrders() .subscribe((data:any[])=>{ this.orders=data; } ); } In the orders-li ...

Mistakes from the @graphql-eslint/eslint-plugin

We are currently working on developing micro-services using NestJS with TypeScript, where each service exposes a GraphQL schema. To combine these schemas into a single graph, we have implemented a federation service within NestJS. During the integration p ...

Node.js: How to handle spaces when running a UNIX command

Currently, I am utilizing the following command to compress files in node.js: var command = '7z a ' + dest + ' ' + orig; exec( command, function(err, stdout, stderr) { ...}); An issue arises when a file containing spaces is involved, ...

I am trying to figure out how to dynamically set the deployUrl during runtime in Angular

When working with Angular, the definition of "webpack_public_path" or "webpack_require.p" for a project can be done in multiple ways: By setting the deployUrl in the .angular-cli.json file By adding --deployUrl "some/path" to the "ng build" command line ...

Utilize jQuery to wrap text within <b> tags and separate them with <br> tags

Upon receiving output in html string format from services, I am presented with the following: "<html>↵<h1>↵Example : ↵<br>Explanation↵</h1>↵<hr>↵<b>key1 : ABCD <br>key2 : 2016-10-18-18-38-29<br> ...

Error message in vuejs: JSON parsing error detected due to an unexpected "<" symbol at the beginning

I have been trying to troubleshoot this issue, but I am having trouble understanding how to resolve it. Currently, I am using lottie-web in a project and need to set the animation parameters on an object in order to pass them as a parameter later. This i ...

Issue encountered while attempting to import three.js in static context

Trying to statically import three.js for a test website. I'm a bit rusty with html/js so something seems off here. Following static import from Code below (all in one html file): <script type="module"> // Find the latest v ...

Utilize the image button to transfer a picture from your desktop

I have created a table using HTML. The first cell of the table (1,1) contains an image that I want to function as a button. When the image is clicked, I would like to be able to select a photo from my computer and add it to the next available cell in the t ...

Utilizing line breaks in Material UI table cell to format array object values in a column

Consider the data array provided below: let myArr = [ { id: 1, name: "A", people: [ { myId: 2, myName: "Name: Fred Likes: Apples" }, { myId: 3, myName: "Name: John Likes: Pears" }, { ...

Sending Ajax requests to web services hosted on a dual-node NLB

I am currently managing a two-node NLB configuration where multiple web services need to be accessed from the client-side using ajax POST requests. When visiting the page at: http://clusternode1/ everything works smoothly. Similarly, when accessing it f ...