Is there a way to declare a specific type in ngFor?

Issue

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.

Is there a solution?

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 information

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

Solution

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
}

Answered By - C.OG