Angular routing is showing an undefined ID from the snapshot

When a user attempts to update a student, I pass in the student ID. The update successfully redirects to the updateStudent page and displays the student ID in the browser link. However, within my app component, it shows as undefined.

Student View component sending sid to update Student component:

 updateStudent(id: number) {
   console.log(id);
   this.router.navigate(['/updateStudent', id]);
 }

Update Student component:

export class UpdateStudentComponent implements OnInit {
 id: number;
 constructor( private route: ActivatedRoute,private router: Router{
     this.id = this.route.snapshot.params['id'];
     console.log(this.id);
   }
}

Routing Module:

const routes: Routes = [
 path: 'studentsList', component: StudentsListComponent },
 path: 'updateStudent/: id', component: UpdateStudentComponent },
 path: ' ', redirectTo: 'main', pathMatch: 'full' },
 ];

Answer №1

Try using params.subscribe instead of what you originally had. Also, remember that the parameter in your router module is named as sid, so make sure to use sid instead of id.

 this.route.params.subscribe((params) => {
     this.id = params['sid'];
     console.log(this.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

What is the reason for the lack of overlap between types in an enum?

I'm having trouble understanding why TypeScript is indicating that my condition will always be false. This is because there is no type overlap between Action.UP | Action.DOWN and Action.LEFT in this specific scenario. You can view the code snippet and ...

When we mention TypeScript and CDK, we are actually talking about the very foundation

As I was working on my current Stack constructor, I came across the Stack.formatArn() method. I started to wonder about the difference between using this.formatArn() and cdk.Stack.of(this).formatArn(). After all, shouldn't "this" refer to the stack it ...

Webpack is encountering difficulties in locating the entry module when working with typescript

I've been working on integrating webpack into my typescript application. To get a better understanding of webpack, I decided to do a minimal migration. I started by cloning the Angular2 quickstart seed and added a webpack.config.js: 'use strict& ...

Is it possible to utilize a JSON file as a JavaScript object without directly importing it into the webpack compiled code?

While initiating the bootstrap process for my Angular hybrid app (which combines Angular 7 and AngularJS), I am aiming to utilize a separate config JSON file by storing it as a window variable. Currently, I have the following setup: setAngularLib(AngularJ ...

Save the application's state of the user in a mean stack program

In my Angular 9 application, I have forms with multiple sections. The first section includes name and personal details, the second part covers primary school information, and the third part focuses on past jobs held by the user. Each part is displayed in a ...

Querying data elements using Graphql mutations: a step-by-step guide

const MUTATION_QUERY = gql` mutation MUTATION_QUERY( $name: bigint! ) { insert_name( objects: { name: $name } ) { returning { id name } } } `; const [onClick, { error, data }] = useMut ...

What is the best approach for retrieving a User from my Angular front-end service?

INQUIRY: I'm attempting to retrieve the details of the currently logged in user in my Angular 2 frontend service with the following code: UserModel.findById(userID, function (err, user) { It appears that this behavior is achievable from the browse ...

Module not located following the completion of project compilation

Below is the content of my package.json file: { "main": "./build/app.js", "types": "./build/app.d.ts", "scripts": { "start": "tsc && node build/app.js", "dev": "concurrently \"tsc -w \" \"nodemon ...

Preventing duplicate arrays from being stored in localStorage by validating them

Is there a way to ensure that when the "add to favorites" button is clicked, its data is stored in localStorage only once? If it already exists in localStorage, clicking for a second time should not have any effect except showing an alert message. I would ...

Understanding File Reading in Angular/Typescript

I'm currently developing an app similar to Wordle and I'm facing an issue with reading words from a file. Here's what I tried: import * as fs from 'fs'; const words = fs.readFileSync('./words.txt', 'utf-8'); con ...

The Fuel-ui module in Angular 2 fails to function properly when loaded from a different directory

We recently switched from ng-cli to Gulp for building our Angular2 project, and we are utilizing Fuel-ui. An unusual error has come up. We have incorporated Fuel-ui's alert component into one of our components. When referencing fuel-ui from node_mo ...

Using React-Router-Native to send an image as a parameter

I am encountering an issue while attempting to pass an image as a parameter in react-router-native and retrieve the data from location.state. Typically, I use the following code to display an image: import Icon from '../image/icon.png'; <Vie ...

Unlocking Global Opportunities with Stencil for Internationalization

Hi there, I've been attempting to implement Internationalization in my stencil project but unfortunately, it's not working as expected. I'm not sure what's causing the issue, and all I'm seeing is a 404 error. I followed these arti ...

Using Angular's async, you can retrieve a value returned by a promise

Within the library I am currently utilizing, there is a method called getToken which can be seen in the following example: getApplicationToken() { window.FirebasePlugin.getToken(function(token) { console.log('Received FCM token: ' + to ...

Animate in Angular using transform without requiring absolute positioning after the animation is completed

Attempting to incorporate some fancy animations into my project, but running into layout issues when using position: absolute for the animation with transform. export function SlideLeft() { return trigger('slideLeft', [ state('void&a ...

Issue with Unit Testing: "InterceptableStoreFactory" provider not found, even when it is included in the "providers" list

I'm currently in the process of writing unit tests for my Angular application using the TestBed approach. Specifically, I am focusing on testing components, so each spec file follows a similar structure: import... describe('AppComponent', ...

I am seeking a way to access the child infoWindow within a Google Maps marker in Angular 5

I am working on an Angular 5 application that utilizes the Angular Google Maps(AGM) library available at . I have implemented functionality where clicking on an item in a list within one component triggers the display of a child infoWindow associated with ...

Top recommendations for implementing private/authentication routes in NextJS 13

When working with routes affected by a user's authentication status in NextJS 13, what is the most effective approach? I have two specific scenarios that I'm unsure about implementing: What is the best method for redirecting an unauthenticated ...

Enhance the functionality of angular-material buttons by incorporating dynamic loading animations into

I am currently working on a solution in Angular 12 to disable a button (and show a spinner) when it is clicked, until the API responds. To achieve this, I plan to follow a similar approach to the angular-material button implementation. Essentially, I want ...

Having trouble getting `npm start` to work for the Lite-server?

As a newcomer to Angular and web programming, I attempted to replicate the quickstart project on github/angular by using "npm start" to initiate lite-server. However, following a tutorial [link] (https://www.youtube.com/watch?v=-zW1zHqsdyc&t=804s), I ...