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?
CodePudding user response:
<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;