While the router Link successfully generates the correct URL, it is failing to redirect to the component and display the data as intended

While working on my angular 7 app, I encountered an issue when navigating to the component report details.

When using router link, it only creates a URL in the browser but does not actually redirect until I click Enter.

The routing works correctly only if I use href instead.

Both href and router link generate the same URL link:

http://localhost:4200/reportdetails?id=2028

When using router link, I specify it as follows:

<a [routerLink]="['/reportdetails']" [queryParams]="{id: subrep.reportID}" >

When using href, I write it like this:

<a href="/reportdetails?id={{subrep.reportID}}">

In approutingmodule.ts:

const routes: Routes = [
  {path:'',redirectTo: 'ReportCategoryComponent', pathMatch: 'full'},
  {path:'report',component:ReportCategoryComponent},
  {path:'reportdetails',component:ReportdetailsComponent},
  {path:'reportdetails/:id',component:ReportdetailsComponent}
];

So how can I solve the issue of router link redirection?

Answer №1

Upon reviewing the link provided in href and routerLink, it is evident that query parameters are added. However, in the routing module, a URL parameter with id is utilized. The component reloads successfully when using href.

Based on the route specified in the routing module, the URL for a specific ID should be

http://localhost:4200/reportdetails/2028

When implementing routing with URL parameters, it is essential to subscribe to params from ActivatedRoute. For routing with query parameters, subscribing to queryParams is required.

For a demonstration of routing, please refer to this stackblitz here

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

Assign the element to either interface A or interface B as its type

Is there a way to assign a variable to be of type interface A OR interface B? interface A { foo: string } interface B { bar: string } const myVar: A | B = {bar: 'value'} // Error - property 'foo' is missing in type '{ bar: s ...

Is it possible to create a return type structure in TypeScript that is determined by the function's argument?

I'm currently stuck on developing a function that takes a string as an argument and outputs an object with this string as a key. For example (using pseudo code): test('bar') => {bar: ...} I am facing difficulties in ensuring the correct ...

What is the best way to access individual items within an *ngFor loop in Angular?

Is it possible to retrieve the value of item.profile image and utilize it in the update function shown in the code below? <ion-content> <ion-grid style ="text-align: center"> <ion-row class="ion-align-items-center" > ...

To properly display a URL on a webpage using Angular, it is necessary to decode

After my console.log in Angular 5 service call to the component, I can see the correct data URL being displayed http://localhost:4200/inquiry?UserID=645 However, when it is inside an Angular for loop in the HTML template, it displays http://localhost:42 ...

Utilize the authenticated page across various tests in Playwright for efficient testing

Starting out fresh with playwright and node.js frameworks Currently in the process of developing a framework using playwright with typescript. Everything was smooth sailing until I reached the point where I needed to run my tests sequentially on the same ...

Bring in the module for DecompressionStream

I'm encountering an issue in my React Typescript app where I am seeing the following error message: webpack compiled with 1 warning ERROR in src/App.tsx:30:21 TS2304: Cannot find name 'DecompressionStream'. 28 | const enc = new TextEncod ...

Error encountered when attempting to retrieve token from firebase for messaging

I am currently working on implementing web push notifications using Firebase. Unfortunately, when attempting to access messaging.getToken(), I encounter an error stating "messaging is undefined." Below is the code snippet I am utilizing: private messaging ...

Guide on toggling the button by clicking on the icon to turn it on or off

Within my angular application, I have implemented font icons alongside a toggle switch. Initially, the switch is in the ON state. The specific functionality desired is for clicking on an icon to change its color from white to red (this has been achieved) ...

Utilizing a created variable within the alert function: A guide

In order to display error messages in my app, I have created the following code: function createTimer(): void { if (!timer.start) { Alert.alert(strings.reminders['date-required']) return; } else if (!timer.end) { Alert.alert(strin ...

What is the best way to convert one array of types to another array of types in Typescript?

Imagine you have the following: type AwesomeTuple = [string, number, boolean] Now, you're looking to transform that type using a generic approach: type AmazingGeneric<T extends any[]> = ... In this scenario: AmazingGeneric<AwesomeType> w ...

limiting the number of HTTP requests within a JavaScript forEach loop

In my current coding situation, I am facing an issue where the HTTP requests are being made simultaneously within a forEach loop. This leads to all the requests firing off at once. const main = async () => { items.forEach(async (i: Item) => ...

Adding the page number to the URL when paginating in AngularJS

I am currently developing an application that involves pagination through records by making API calls to the server like random/api/endpoint?page=1/2/3 As I paginate, I need to append the requested page number to the URL like http://www.paginate.com/some ...

Always directing to the initial page upon refreshing the browser in Angular's secondary route

In my app, there is a default component called StartComponent, accessed through the Angular router's start route. Therefore, in the browser address bar, it appears as myhost/start. Upon navigating to the second route, the app logic takes me to Second ...

Tips for setting a default value in a generic function in TypeScript, where the default argument's type is determined by the generic parameter

One of my functions calls an API and accepts a parameter to limit the fields returned by the API: type MaximumApiResponse = { fieldA: string, fieldB: number } const f = async <U extends keyof MaximumApiResponse>( entity: number, prop ...

In D3 Hierarchy Typescript, every parent-child duo is assigned the same color

I recently came across an interesting example of the "D3 Collapsible Force Layout" on this website. I decided to tweak the input data a bit: const data = { "name": "directory", "children": [ {"name": "1st file", "children": [{"name": "1f 1st func ...

What is the best way to remove a void type from a union type?

Hey there everyone, I have a custom generic type called P that is defined as P extends Record<string, unknown> | void I am looking to create an exists function export class Parameters<P extends Record<string, unknown> | void> { p ...

Using TypeScript generics with the `keyof` operator may result in rejection

I created a custom method using the RXJS library which looks like this : function Subject<T>(t: T):T { return t; } In addition, I defined an interface that specifies the structure of my application values. Additional keys can be added to this i ...

Angular Error - TS2322: The specified type of 'Object | null' cannot be assigned to 'NgIterable<any> | null | undefined'

I encountered an error in homes.component.html while trying to run my Angular project to showcase a list of homes from a JSON file. https://i.stack.imgur.com/D0vLQ.jpg Json File [ { "image_url": "https://images.unsplash.com/ph ...

Trigger event when the useRef element's height surpasses zero

I have a large list of photo thumbnails, and I need to ensure that one of the thumbnails scrolls into view when the list is loaded. The photos are generated using the map function, and the container div of one of the thumbnails will be assigned a ref. I ...

Angular5 - Modify a public variable using an intercept in a static service

Take into account the following Angular service: @Injectable() export class AuthService { public userConnected: UserManageInfo; getManageInfo(): Observable<UserManageInfo> { return this.httpClient .get('api/Account/Man ...