Typescript compiler error - pass in an object's property of MyType to an attribute which only accepts MyType

Question

Consider the following HTML:

<my-menu-item [item]='item'>
  <my-icon type='item.iconType'></my-icon>
</my-menu-item>

The my-icon component only accepts an input of type IconType as input for the type attribute. Now, the passed in item to my-menu-item is a type that contains the property iconType which is of type IconType. Still, for the above shown HTML, I am getting a compiler error, saying that I cannot pass in item.iconType as argument to the my-icon type attribute.

Is there a way to solve this?

Answer 1

<my-menu-item [item]='item'>
  <my-icon type='item.iconType'></my-icon>
</my-menu-item>

In this code you're missing the [] around type : [type]="item.iconType"

I will assume this a typo on your part.

As for the question, be sure that your item implements this :

type IconType = 'png' | 'jpg'; // Your types
interface Icon {
  iconType: IconType
}

And that your MyIconComponent has this :

@Input() type!: IconType;