title: Can I extend an angular component and reference the base component in an ngFor loop?
body: <p>Is it possible to extend components in angular? And if so, can I create a list of multiple different components (via an ngFor loop) if they all extend the same base component?</p>
  
  <p>For example, can my custom menu bar have a list of different kinds of menu items, if all of them extend the same "CustomMenuItem" component? Some would be dropdown menus, some would be buttons, some would be text boxes, etc, but all would share some basic functionality...</p>
  
  <pre><code>@Component({
      selector: 'custom-menu-bar',
      inputs: ['customMenuItems'],
      outputs: ['onMenuEvent'],
      template: `
          &lt;div class="row"&gt;
              &lt;custom-menu-item *ngFor="#item of customMenuItems"&gt;
                  ...
              &lt;/custom-menu-item&gt;
          &lt;/div&gt;
      `
  })
  export class CustomMenuBar {
      customMenuItems: CustomMenuItem[];
      onMenuEvent: EventEmitter&lt;MenuEvent&gt;;
  
      //...
  }
  </code></pre>