In Angular 18, I have a link defined like this:

<a [routerLink]="link" [queryParams]="queryParams">{{linkText}}</a>

queryParams is initialized as {} in the component and is then populated as other events are happening in the component.

When left-clicking on the link navigation includes the queryParams. But If I right-click and select Open in a new tab it doesn't include the queryParams. And I also notice the href that is generated doesn't include the queryParams either (in both cases).

How can I make sure the queryParams are retained when manually opening the link in a new tab?

EDIT: My initial post had a generic example, but I've since realized there is something about this specific link in my app that's not working properly, so I changed it to be a little more specific.

In Angular 18, I have a link defined like this:

<a [routerLink]="link" [queryParams]="queryParams">{{linkText}}</a>

queryParams is initialized as {} in the component and is then populated as other events are happening in the component.

When left-clicking on the link navigation includes the queryParams. But If I right-click and select Open in a new tab it doesn't include the queryParams. And I also notice the href that is generated doesn't include the queryParams either (in both cases).

How can I make sure the queryParams are retained when manually opening the link in a new tab?

EDIT: My initial post had a generic example, but I've since realized there is something about this specific link in my app that's not working properly, so I changed it to be a little more specific.

• angular

1 Answer 1

The problem was in how I was dynamically updating queryParams. I was changing a property on the object, e.g.

this.queryParams.property = 'value'

Instead of assigning a new object, e.g.

this.queryParams = { ...this.queryParams, property: 'value' }