Angular - Using interpolation with ternary operator in Input property binding

Question

I am trying to make this property binding to work. I want to use ternary operator where conditions are interpolated strings. HTML is compiling, but the element is not showing.

<si-icon [icon]="item.isSelected ? 'element-face-{{item.faceColor}}-filled' : 'element-face-{{item.faceColor}}'"></si-icon>

Can someone point me what I am doing wrong here? Thank you!

Answer 1

Solution 1: In HTML

<si-icon [icon]="
    item.isSelected 
    ? 'element-face-' + item.faceColor + '-filled' 
    : 'element-face-' + item.faceColor">
</si-icon>

---

Solution 2: Get style name from component.

getIconStyle(isSelected: boolean, faceColor: string): string {
  return isSelected
    ? `element-face-${faceColor}-filled`
    : `element-face-${faceColor}`;
}

<si-icon [icon]="getIconStyle(item.isSelected, item.faceColor)">
</si-icon>

Sample Stackblitz Example