Reputation: 246
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.
Upvotes: 0
Views: 172
Reputation: 214335
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.
Upvotes: 1