I am attempting to assess an expression that is originating from one component and being passed into another component.
Here is the code snippet:
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 attribute is currently evaluating as
/test?testid={{element["TestId"]}}/test?testid=123
element["TestId"] needs to be evaluated within the child scope.
I came across this helpful link but I am unsure of how to implement it in my specific scenario.
EDIT:
I have added a link for a similar example on StackBlitz.
My goal is to create a generic ChildComponent, allowing the parent to determine which column to evaluate for element["TestId"].
Please disregard any unnecessary edits, as I am still learning to improve the way I present my questions.