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!

Yong Shun · Accepted Answer · 2022-07-08 01:12:50Z

2

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

answered Jul 8, 2022 at 1:12

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - Using interpolation with ternary operator in Input property binding

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related