How to dynamically add queryParams to a dynamically created link in Angular 7?

Question

There is already a question here regarding it but that didn't work for me.

The following piece of code is creating links in my Angular 7 application.

---

COMPONENT

...

this.links = [
  ...
  {
    title: 'client-management.title',
    routerLink: '/client/list',
    param: [
      {
        name: 'page',
        value: '0'
      }
    ],
    roles: [UserRoles.FP_ADMIN],
    display: false
  },
  {
    title: 'client-management.new',
    routerLink: '/client/add',
    roles: [UserRoles.FP_ADMIN],
    display: false
  }
];

...

---

HTML

...

<li class="nav-item" *ngFor="let link of links">
    <a class="nav-link text-white p-2" *ngIf="link.display" routerLink="{{link.routerLink}}" translate>{{link.title}}</a>
</li>

...

Now I have a requirement to add queryParams dynamically.

The following piece of code is not working

<li class="nav-item" *ngFor="let link of links">
    <a class="nav-link text-white p-2" *ngIf="link.display && !link.param" routerLink="{{link.routerLink}}" translate>{{link.title}}</a>
    <a class="nav-link text-white p-2" *ngIf="link.display && link.param" routerLink="{{link.routerLink}}" [queryParams]="{link.param[0].name: 'home'}" translate>{{link.title}}</a><--This line throws error
</li>

The error

ERROR in : Parser Error: Missing expected : at column 6 in [{link.param[0].name: 'home'}] in C:/Users/..../app-nav-bar.component.html@7:10 ("link text-white p-2" *ngIf="link.display && link.param" routerLink="{{link.routerLink}}" [ERROR ->][queryParams]="{link.param[0].name: 'home'}" translate>{{link.title}} ") : Parser Error: Unexpected token } at column 28 in [{link.param[0].name: 'home'}] in C:/Users.../app-nav-bar.component.html@7:10 ("link text-white p-2" *ngIf="link.display && link.param" routerLink="{{link.routerLink}}" [ERROR ->][queryParams]="{link.param[0].name: 'home'}" translate>{{link.title}} ")

So the question is how to add queryParams to a dynamically created link in Angular 7?

Any help is appreciated. Regards.

---

Update 1:

Following is my tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ],
    "baseUrl": "src",
    "paths": {
      "@app/*": ["app/*"],
      "@env/*": ["environments/*"]
    }
  }
}

Answer 1

This is actually a simple Javascript syntax error (the content of [queryParams] is interpreted as Typescript code by the Angular template engine).

You cannot declare a field name using simple syntax as you would with an explicit constant:

const varname = 'field_name';
{ varname: 'test_value' } // <-- will not give you object { field_name: 'test_value' }

If you want to achieve that, there is a dedicated syntax in ES6:

{ [varname]: 'test_value' } // <-- gives you the equivalent of { field_name: 'test_value' }

So in your case, replace your [queryParams] with:

[queryParams]="{[link.param[0].name]: 'home'}"

Update after Update 1 in question:

You'll want to make sure that ES6 is enabled in your config, so use "target": "es2015" instead of es5 in your tsconfig.json.