Evaluate expression twice in angular

Question

I'm trying to evaluate an expression coming from the one component inside other component.

Below is the code

Parent.component.ts

parentData: any= {
    name: 'xyz',
    url: '/test?testid={{element["TestId"]}}'
};

Parent.component.html

<child [data]="parentData"></child>

child.component.ts

@Component({ 
selector:'child'
...
})
export class ChildComponent {
    @Input() data: any;
}

child.component.html

<td mat-cell *matCellDef="let element">
    <a href="{{data.url}}">{{element["TestName"]}}</a>
</td>

The href is being evaluated as /test?testid={{element["TestId"]}}. What it needs to be is /test?testid=123

element["TestId"] - is to be evaluated in child scope.

I found this link but I am not sure how can I apply it in my case.

EDIT: Adding link for StackBlitz contains similar example. I'm trying to make my ChildComponent generic, that's why is want the parent to decide which column to evaluate for element["TestId"] Please ignore my edits, I'm still learning on how to write the question better.

try this ` url: `/test?testid=${ExpressionToBeEvaluatedInChildScope}` ` — Abdul Basit, Jun 14 '19 at 20:06
then you should do this `url: '/test?testid='+ExpressionToBeEvaluatedInChildScope` — Abdul Basit, Jun 14 '19 at 20:09
Can you give an example of what you want to put in `ExpressionToBeEvaluatedInChildScope `? — ConnorsFan, Jun 14 '19 at 20:12
If you defined `urlPrefix` in `parentData` (without the id binding part), you could do this in the child component: `href="{{ data.urlPrefix + element['TestId'] }}"`. Or `[href]="data.urlPrefix + element['TestId']"`. — ConnorsFan, Jun 14 '19 at 20:26
I'm trying to make the child component generic. So I want the parent to decide whether it should be a `TestId` or `TestCaseId` or some random column. — user, Jun 14 '19 at 20:32

score 1 · Accepted Answer · answered Jun 15 '19 at 03:29

You can make a function from that property

parentGridData = {
  ...
  url: element => `http://www.google.com/searchText=${element["name"]}`
};

and then pass an appropriate argument to it:

<a href="{{gridData?.url(element)}}">

But make sure that your function doesn't contain heavy computations.

Forked Stackblitz

Evaluate expression twice in angular

1 Answers1