Access child type's properties from Angular template

Viewed 89

I suspect this question has already been answered, but all answers I can find are about child components, not child types.

I have two interfaces. (edit to clarify: I do have more items that inherit from Item, and any of these child types of Item can be in the list. Otherwise I could make a list of MagicItems, but that does not work in my case)

export interface Item {
   name: string;
   value: string;
}

export interface MagicItem extends Item {
   abilities: string[];
}

I have a list of Items in my component, with a few MagicItems in that same list. Can I access abilities from the template? If I try, I get the warning that 'abilities' does not exist on type 'Item'.

I have tried using *ngIf="typeof(item) === 'MagicItem'" and (item as MagicItem).abilities but I cannot seem to get that working in the template. The latter does work in the typescript code.

0 Answers
Related