Forwarding parameter data type

I am facing an issue with 2 navigation points leading to the same screen

1.

this.router.navigate([this.config.AppTree.App.Module.Details.Path], { state: { data: { id: this.TableId } } });
this.router.navigate([this.config.AppTree.App.Module.Details.Path], { state: { data: { id: id } } });

Although the correct ID value is being sent, there seems to be a difference in the data type of the parameter in both cases

The current solution works but it is not elegant:

let params = history.state.data;

    if (typeof (params.id) == 'object') { this.TableId = parseInt(params.id[0]); }
    else { this.TableId = params.id; }

I am looking for a better way to send or receive the parameter. Why does it get added into an array in one case? Is there a parsing method that could make it cleaner and possibly eliminate the need for the if statement?

UPDATE:

definition:

TableId: number;

I tried

this.id = this.route.snapshot.paramMap.get('state')

suggested by Mark Homer. I have

import { Router, ActivatedRoute } from '@angular/router';

and also added it to the constructor, however, using either snapshot or paramMap, I still encounter the error

Property does not exist on type ...
. Is there something crucial that I am overlooking?

Answer №1

Transferring information via router

 this.router.navigate([path], { state: { data: anyData });

 this.router.navigateByUrl(path, {
        state: {data: anyData}
    });

Retrieving data on the receiving end

const state = this.router.getCurrentNavigation().extras.state

To address your question:

const id = this.router.getCurrentNavigation().extras.state.data.id

View console.log output here : Blitz

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

Angular date selection with a range of plus two days, factoring in the exclusion of weekends

I am currently using a mat date picker range with specific logic. The minimum date that a user can select on the calendar is set to + 2 days. For example, if today's date is July 20, 2022, the minimum selectable date would be July 22, 2022. However, ...

Enforcing object keys in Typescript based on object values

I'm looking to design a structure where the keys of an object are based on values from other parts of the object. For example: type AreaChartData = { xAxis: string; yAxis: string; data: { [Key in AreaChartData['xAxis'] | AreaChart ...

Exploring the differences between Typescript decorators and class inheritance

I find myself puzzled by the concept of typescript decorators and their purpose. It is said that they 'decorate' a class by attaching metadata to it. However, I am struggling to understand how this metadata is linked to an instance of the class. ...

What does ngModel look like without the use of square brackets and parenthesis?

Can you explain the usage of ngModel without brackets and parentheses in Angular? <input name="name" ngModel> I am familiar with [ngModel] for one-way binding and [(ngModel)] for two-way binding, but I am unsure what it means when ngModel ...

Looking to accentuate specific columns in highcharts upon clicking?

https://i.sstatic.net/R3Y19.png Essentially, the image above serves as a reference idea on the webpage, showcasing four individual highchart charts. Each chart is initialized using the following code: this.chart2 = new Chart( { chart: { ...

Guide to configure Validator to reject the selection of the first index option in Angular 2

When using a select option, it should be set up like: <div class="form-group row" [ngClass]="{'has-error': (!form.controls['blockFirstIndex'].valid && form.controls['blockFirstIndex'].touched), 'has-success&ap ...

Creating a component in Angular that utilizes multiple nested FormGroups

When attempting to nest multiple FormGroups, everything works smoothly if the template is not extracted into separate components. For instance, the following example functions as expected: Template <form [formGroup]="baseForm"> <div formGr ...

Creating multiple relationships in TypeORM for entities with private properties

In my node application, I am utilizing the typeorm library for entity mapping. My goal is to establish multiple type relations between entities. While following the documentation, I noticed that the entity properties are marked as public, allowing access f ...

The Next.js 13 function getQueriesData does not have any matching overloads for TypeError

Having a TypeScript error issue while using the getQueriesData function in Next.js 13 with React Query. Below is my code snippet: // app/products.tsx import { getQueryClient } from "@/app/providers/getQueryClient"; import { useQuery, useQueryCli ...

Securing your Angular application with user authentication and route guarding ensures

In the process of developing an Angular single-page application (SPA) front-end that interacts with a GraphQL endpoint, I encountered a challenge. Upon user login, I store the token in local storage and update the authentication state in my AuthService com ...

"Error: Unable to locate module - 'electron-is-dev'" in my web development project using electron, typescript, and webpack

I'm currently working on a project using Electron, Typescript, and webpack. I am planning to integrate react.js into the project. However, when I ran "npx webpack" in the terminal, I encountered an error message. The error stated that the "electron- ...

Having trouble resolving errors in Visual Studio Code after failing to properly close a parent function? Learn how to fix this issue

Here we have the code starting with the construct function followed by the parents function public construct() //child { super.construct; } protected construct() //parent { } The issue arises where I am not receiving an er ...

The magical form component in React using TypeScript with the powerful react-final-form

My goal is to develop a 3-step form using react-final-form with TypeScript in React.js. I found inspiration from codesandbox, but I am encountering an issue with the const static Page. I am struggling to convert it to TypeScript and honestly, I don't ...

Configuring Angular routes based on service method invocation

I have my routes configured in @NgModule. I also have a service that determines which parts of the application to display based on specific conditions. I need to call this service and adjust the routes according to its output. Issue: The route configurati ...

Deciding between bundling a Typescript package and using tsc: When is each approach the best choice

When it comes to publishing a Typescript NPM package (library, not client), I have two main options: 1. Leveraging Typescript's compiler First option is to use the Typescript compiler: tsc and configure a tsconfig.json file with an outDir setting: { ...

Necessary Typescript class property when executing code

Is there a way to determine if a class property is required in Typescript at runtime? export class A { public readonly ab?: number; public readonly ac?: number; public readonly ad: number; public readonly ae: number; } Can emitDecoratorMetadata o ...

An error was encountered while attempting to redirect in an Angular 4 project, the URL was set up for HTTPS

I've been attempting to access an Angular 4 project deployed locally on my machine through a form on an HTML page: <!DOCTYPE html> <html> <body> <form action="https://test-pubg.sohum.com:4200" target="_blank" method="post"> ...

Angular import definitions corresponding to Font Awesome classes

https://fontawesome.com/icons/ When looking for an icon, the website provides a class to add to the HTML code. However, when using Angular, it is necessary to use icon definitions. For instance: <i class="fa-solid fa-star"></i> Wo ...

How to add a class to an element using an Angular 2+ directive

I am working with an Angular 6.0.0 application and I have the requirement to dynamically add classes to HTML elements. My current implementation is functional, but I want to enhance it by making the prefix reusable through a directive. <div class="clas ...

Troubleshooting a NextJs/TS problem with importing ESM modules

Click here for the Code Sandbox I'm currently in the process of transitioning some code to NextJS 11 / Webpack 5, including certain modules that now exclusively support ECMAScript Modules (esm). Prior to the upgrade, I could easily export all files ...