Is there a way to declare a specific type in ngFor

Question

I am using ngFor to iterate a collection of a specific type [Menu] in Angular 4.x

Then looping on a collection property of the menu object [menu.items]

Unfortunately the property is unknown in my IDE [Eclipse + Angular IDE] even though the Menu class defines the items property as an array of MenuItem.

Any thoughts?

Relevant class declarations -

export class MenuBase {
  id: string;
  title: string;
  isPublic: boolean;
  roles: string[];
  items: MenuItem[];
  position: number;
// rest of class omitted
}

export class MenuItem extends MenuBase {
  menuItemType: MenuItemType;
  callback: () => void;
  location: string;

  constructor (options: any) {
    super(options);
    this.location = options.location;
    this.menuItemType = options.menuItemType || MenuItemType.location;
    this.callback = options.callback;
  }
}

export class Menu extends MenuBase {
  constructor (options: any) {
    super(options);
  }
}

Additional info - This is the project I was working on: https://github.com/savantly-net/ngx-menu
The project will show an error in Eclipse, even though it's valid.

I never created any documentation, but I used it here -
https://github.com/savantly-net/sprout-platform/tree/master/web/sprout-web-ui

Answer 1

What I've had success with is creating a new component for the template that the *ngFor will render and have that typed.

Container template:

<ng-container *ngFor="item of items" >
  <my-custom-component [item]="item"></my-custom-component>
</ng-container>

Custom Component template:

<div *ngIf="item.menuItemType == 'dropdown'">
  <!-- -->
</div>

ts file:

@Component({})
export class MyCustomComponent {
  @Input() item: MenuItem
}