Learn how to pass JSON data into an anchor tag with Angular router link and the query parameters attribute set as "<a ... [queryParams]="q=|JSON|

As an Angular user, I am trying to populate a query parameter with a JSON object.

<ngx-datatable-column name="Sku" prop="product.sku" [flexGrow]="0.5">
  <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
    <a [routerLink]="['/general','products']" [queryParams]="{q: { search: value } }">
      {{value}}
    </a>
  </ng-template>
</ngx-datatable-column>

The code above generates the link: 

http://localhost:4200/general/products?q=%5Bobject%20Object%5D

Instead of 

http://localhost:4200/general/products?q={"search": "SomeSearchValue"}
. (html escape of course.)

Any ideas on how to resolve this issue?

EDIT:

<a [routerLink]="['/general','products']" [queryParams]="{q: { search: value }.toString() }">

The above solution does not seem to work.

angulartypescriptangular2-routing

Answer №1

What's the first question?

Give this a shot:

<ngx-datatable-column name="Description" prop="product.description" [flexGrow]="0.8">
  <ng-template let-row="row" let-value="value" ngx-datatable-cell-template>
    <a [routerLink]="['/details','products']" [queryParams]="{ keyword: value }">
      {{value}}
    </a>
  </ng-template>
</ngx-datatable-column>

Answer №2

After some research, I discovered the resolution is to use the json pipe:

    <a [routerLink]="['/general','products']" [queryParams]="{q: { search: value } | json }">
      {{value}}
    </a>

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

Handling linting errors for getInitialProps return type in NextJS with Typescript

I've been grappling with this problem for an extended period, and despite numerous attempts, I haven't been able to resolve it. My issue revolves around a basic page named one.tsx. Its structure is as follows: https://i.sstatic.net/xP89u.png T ...

typescripteslintnext.js

I am having trouble getting the guide for setting up a NextJS app with Typescript to function properly

For some time now, I have been experimenting with integrating Typescript into my NextJS projects. Initially, I believed that getting started with Typescript would be the most challenging part, but it turns out that installing it is proving to be even more ...

typescriptnpmnext.js

Anticipating the outcome of various observables within a loop

I'm facing a problem that I can't seem to solve because my knowledge of RxJs is limited. I've set up a file input for users to select an XLSX file (a spreadsheet) in order to import data into the database. Once the user confirms the file, v ...

angulartypescriptrxjsobservableangular8

Tips for incorporating a reference into a styled component div in a React application using TypeScript

Looking to include a reference to a styled component div. Here is the code snippet: const DragAndDrop: React.FC<any> = props => { const divRef= React.createRef(); return ( <Zone ref={divRef}/> ); } Encountering thi ...

reactjstypescript

Why is my Angular proxy failing to rewrite the path when making an HTTP GET request?

I am facing an issue with my proxy configuration where it is not redirecting as expected based on the rewrite configuration. You can find my proxy.config.json below: { "/sap": { "target" : "http://server.domain.com:8002", "secure" : fa ...

angularproxycross-browserodata

Subscribing to a GraphQL mutation through Angular with the Appsync client

Currently, I am developing a chat application in Angular using GraphQL with Appsync on AWS. The current process for creating a new chat involves mocking up the chat and sending it to the server. On the server-side, a unique chat_id is generated for each ch ...

angulargraphqlapollo-clientaws-appsync

The Angular HTTP post request fails to get sent

I have a simple post method defined as follows: createTask(taskName: String, parentTaskId: String) : Observable<any>{ let headers : HttpHeaders = new HttpHeaders(); headers.set('Content-Type', 'application/json; charset=utf-8&a ...

angularpost

When invoking a JavaScript method, the context variable 'this' is lost

I have developed a basic pointer to a method like this: export class SmbwaService { getExistingArsByLab(labId: number): Observable<SmwbaAr[]> { this.otherMethod(); } otherMethod(): void { } } let method: (x: number) => ...

javascripttypescript

Employing multiple subscriptions within a function

I am facing an issue in my Angular application where I am trying to display a detailed summary of the sales for a specific drink using the DrinkDetailComponent. However, upon initializing the component, only one backend call is being made to retrieve infor ...

angulartypescriptsubscription

Issue encountered in Angular 16: angular-slickgrid is reporting that property 'detail' is not found on type 'Event'

Currently, I am working on integrating angular-slickgrid v6 with Angular 16. In my code snippet, I am using (onClick)="onCellClicked($event.detail.eventData, $event.detail.args)" to retrieve the selected row. However, I encountered an error message stating ...

angularangular-slickgrid

A guide to accessing a property value in Angular 6 from an object using a string key

In my Angular application, I am receiving an object with multiple arrays from a REST service. I need to access the value from the incoming object based on the property name. Here is what the object looks like: data{ array1:{}, array2:{}, array3:{} } Th ...

javascriptangulartypescript

Angular 4 - The Datatables plugin is being initialized before the data is loaded into the

When I retrieve data from the backend and bind it to a table in the view, the datatable function is being called before the rows are shown on the screen. import { Component, OnInit } from '@angular/core'; import {HttpClient} from '@angular/ ...

angulardatatables

Upon the initial render, the fetch request in the NextJS Client component is not triggered

When I load my home page, I want to display a collection of cards from a client component. However, the API fetch request in the client component does not trigger on the initial render, preventing the cards from appearing. To fix this issue, I have to manu ...

typescriptnext.js

Getting into a dynamic named property inside another object in angular can be achieved by utilizing bracket notation

I encountered an issue in my Angular 8 project where I create an object from a JSON, but there is a dynamic property whose name is unknown until runtime. This causes problems when trying to access the value of that dynamic property within another object, l ...

angulartypescriptobjectionic-frameworkruntime

Transferring an Angular 2 component with output parameters to Angular 1 via Downgrade

After successfully downgrading an Angular 7 component to Angular 1, I encountered a small issue that has proven difficult to resolve. The output parameter in my downgraded component is defined as: @Output()isValid = new EventEmitter<boolean>(); An ...

angularangular7downgrade

Changing the color of an Angular <div> element with scripting

I am currently working on an Angular 6 project and I need to change the colors of a div tag from a script after a click function. However, I also need to change it back to transparent. When I click on the "Inheritance" option, the background color of the ...

javascripthtmlangulartypescript

Extract JSON values based on a given condition

I am working on a Typescript project that involves an array and a JSON object. I need to extract the value of a property from the object based on another property's value being in the array. Here is the array: let country: string[] = [ 'AR' ...

arraysjsontypescript

Creating an Inner Join Query Using TypeORM's QueryBuilder: A Step-by-Step Guide

Hello there! I'm new to TypeORM and haven't had much experience with ORM. I'm finding it a bit challenging to grasp the documentation and examples available online. My main goal is to utilize the TypeORM QueryBuilder in order to create this ...

typescripttypeorm

Encountering both a CORS error and data in Angular 7

My application is using Angular 7 for the front end and Node.js (express) for the backend. The cors module in the Node.js server.js file is implemented like this: var cors = require('cors') app.use(cors()); When making an API call from the fro ...

javascriptnode.jsangularexpresscors

What is the best way to import and export modules in Node.js when the module names and directories are given as strings?

Here is the structure of my folder: modules module-and index.js module-not index.js module-or index.js module-xor index.js moduleBundler.js The file I'm currently working on, moduleBundler.js, is re ...

javascriptnode.jstypescriptnode-modules