Angular router link How to pass json into <a ... [queryParams]="q=|JSON|"/>

Question

From the view of an angular i'd like to fill a query param 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>

Unfortunately, the above code produces the following link: http://localhost:4200/general/products?q=%5Bobject%20Object%5D

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

How could i make this work?

EDIT:

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

Does not work.

Answer 1

I found the solution, its the json pipe:

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