Angular - Pass Interpolation expression as component parameter

Question

I am building a component that act as a dropdown list. Since this is meant to be used generally, I would like that any list of objects could be displayed with the dropdown.

<dropdown [options]="list" [itemKey]="'itemkey'" [displayExpression]="Item no {{attr}}" (selectedItem)="getSelectedItem($event)"></dropdown>

I know I could also pass a template, but I think that passing an expression to be interpolated would be more simple for the developer.

1. How can I send the string interpolation? Should I pass with single quotes?
2. How can I interpolate the string inside the component?

Answer 1

passing the template is really a more flexible way of achieving what you expected, but, if template is too heavy for you, a simple thing would be also passing a label getter

// ts
getItemLabel(item) {return `${item.name} is an item`}

// html
<dropdown [labelGetter]="getItemLabel">

// dropdown html
<label>{{labelGetter(item)}}</label>