Can a constant be utilized as the property name within routerLink when specifying queryParams?

I am currently trying to update the current page by modifying or adding the query parameter "categoryId". When I attempt:

<a
      [routerLink]=""
      [queryParams]="{ categoryId: category!.id }"
      queryParamsHandling="merge"
>

It works perfectly, but I would prefer to use a constant for the query parameter name to easily make changes in the future without searching through each occurrence.

Within the component.ts file, I have defined the property:

categoryIdQueryParamName = QueryParamNames.CATEGORY_ID;

I have attempted the following:

<a
  [routerLink]=""
  [queryParams]="{ {{'"' + categoryIdQueryParamName + '"' }}: category!.id }"
  queryParamsHandling="merge"
>

After reviewing: , I also tried:

<a
  [routerLink]=""
  [queryParams]="{ [categoryIdQueryParamName]: category!.id }"
  queryParamsHandling="merge"
>

However, I am still encountering a compilation error. If possible, can you provide guidance on the correct approach? Additionally, I am aware that I could achieve this programmatically using (click), but I prefer using <a [routerLink]> to benefit from the ability to right-click and open links in new tabs.

angulartypescriptquery-stringangular-routerlinkangular12

Answer №1

One efficient method is to implement it in TypeScript.

public extractQueryParams() {
    const params = {};
    params[QueryParamNames.CATEGORY_ID] = category!.id;
    return params;
}

<a [routerLink]="" [queryParams]="extractQueryParams" queryParamsHandling="merge" >

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

Filtering data in an antd table by searching

Just starting out with React hooks, specifically using TypeScript, and I'm struggling to implement a search filter with two parameters. Currently, the search filter is only working with one parameter which is 'receiver?.name?'. However, I wo ...

javascripthtmlreactjstypescripthtml-table

"Learn how to dynamically change the color of a button in Angular after it has been clicked

Can someone assist me in changing the button color to red after it has been clicked? I am looking for guidance on how to achieve this. The current code snippet is as follows: <td> <button mat-icon-button color="primary"> <m ...

htmlangularangular6

Preserve Angular 2 service instances while navigating between routes

I am faced with a scenario where I have three components that are all utilizing the same DataService. This is not because they share the same data, but rather because they use the exact same methods and patterns: @Component({ templateUrl: './data ...

angularangular2-routing

Can the Angular CLI be installed without using the command prompt?

Are there alternative methods for installing angular cli besides using the command line in cmd? I am encountering proxy setting issues when trying to install it using npm install -g @angular/cli (I am currently using a VPN for work) npm ERR! code ETIMEDOUT ...

angularnpmnpm-install

Angular2 - Model not being refreshed by Directive

I have implemented a directive on an HTML input box to handle numeric values. The directive is meant to "clean" the number (removing commas, dollar signs, etc) when a user pastes a number into the textbox. Although the cleaning code works properly, the iss ...

angularangular2-directives

Is it true that TypeScript prohibits the presence of circular references under the condition of having generic parameters

I encountered an issue of type error in the given code snippet Type alias 'bar2' circularly references itself.ts(2456) type foo = { bars: bar[]; }; //works fine type bar = foo; type foo2<T extends Record<string, unknown> = Record< ...

typescript

Exploring nested contexts in react testing library with renderHook

This is a sample code snippet in TypeScript that uses React and Testing Library: import React, { FC, useEffect, useMemo, useState } from 'react'; import { renderHook, waitFor } from '@testing-library/react'; interface PropsCtx { inpu ...

reactjstypescriptreact-hooksreact-testing-library

Steps for developing a collaborative module

New to the world of Ionic/Angular development, my project structure looks like this: - src -- /app ---- app.component.ts ---- app.module.ts ---- main.ts ---- ... -- /pages ---- /event-home ------ /event-home.module.ts ------ /event-home.ts event-home.mod ...

angularionic-frameworkionic3

In the context of NextJs, the req.body is treated as an object within the middleware, but transforms

Here is the middleware function responsible for handling the origin and CORS: export async function middleware(request: NextRequest) { const requestHeaders = new Headers(request.headers) const origin = requestHeaders.get('origin') ?? '& ...

javascriptreactjstypescriptnext.js

What is the significance of the any type in Typescript?

As I delve into learning Typescript, a question arises in my mind. I find myself pondering the purpose of the any type. It seems redundant to specify it when every variable essentially acts as an "any" type by default. Consider this scenario where the out ...

javascripttypescript

The element type 'ReactElement<any>' does not match a JSX element constructor function. 'undefined' cannot be assigned to type 'Element | null'

After attempting the suggested fix of deleting node_modules/ and yarn.lock, then reinstalling everything, I still cannot resolve the issue. I am currently developing a basic router that renders children based on a certain prop: import React, { Fragment } ...

javascriptreactjstypescriptcreate-react-app

Transferring functionality from a child component to a parent component

I have a Base Component called ListComponent and a ParentComponent named Businesses2ListComponent. The concept is to have multiple types of Lists with tables that all stem from the ListComponent. This requires passing the correct service accordingly. In t ...

angulartypescriptfrontendweb-frontend

Enhance Your NestJS Experience: Using Interceptors for Mapping and Error Handling

I'm looking for a NestJS interceptor that can log requests in all scenarios, including both successful executions and errors. Below is an example implementation: public intercept(context: ExecutionContext, next: CallHandler): Observable<any> { ...

node.jstypescriptexpressrxjsnestjs

MSBUILD encounters numerous JQuery errors when compiling a web project with TypeScript

Currently, I am working on a .net core 3.1 (netcoreapp3.1) razor pages project that includes typescript files and a few javascript files. The project builds perfectly from Visual Studio 2019 (professional) as well as from the command line using MSBuild. H ...

typescriptmsbuild

*NgFor toggle visibility of specific item

Here is a snippet of HTML code that I'm working with: <!-- Toggle show hide --> <ng-container *ngFor="let plateValue of plateValues; let i=index"> <button (click)="toggle(plateValue)">{{i}}. {{ btnText }}</button> ...

javascriptangulartogglengfor

What is the method in AngularJS2 for using TypeScript to inject dependencies into components?

I have been encountering different methods of injecting dependencies into my component and not all of them seem to be working for me. I am curious about the advantages and disadvantages, what the recommended best practices are, and why some methods are not ...

dependency-injectiontypescriptangular

Discover the power and ease of combining Angular with OIDC Implicit Flow for seamless

I have integrated the angular-auth-oidc-client package for authentication in my Angular application with our OIDC server. While using the implicit flow, some users face log out issues when the access token expires. To address this, I decided to implement t ...

angularopenid-connect

Utilize the import feature to bring in a paragraph from a separate file within your

Hey there! I've encountered a little issue. I'm trying to access an object from another component in the ability.component.html file but for some reason, the last paragraph (h1) is not functioning properly. Any idea why? app.component.ts @Compo ...

angular

Angular: Safely preserving lengthy content without the use of a database

As a beginner working on an Angular 11 educational website with approximately 20 static articles, I created a component template for the articles to receive text inputs. However, I am wondering if there is a more efficient way to handle this. Is there a ...

angulartypescript

Looking for a way to dynamically append a child element within another child

Struggling to include a new child within a specific child in Json myObject:any[] = []; this.myObject = { "type": "object", "properties": { "first_name": { "type": "string" }, "last_name": { "type": "string" }, } } addF ...

javascriptangulartypescript