filterByTypeAndIndex.ts

import {AfterViewInit, Component, QueryList, ViewChildren} from '@angular/core';
import {NgComponentOutlet} from "@angular/common";

// Something to loop over
@Component({
  template: `<p>Component Type A</p>`
})
class ComponentA {}

@Component({
  template: `<p>Component Type B</p>`
})
class ComponentB {}

@Component({
  template: `<p>Component Type C</p>`
})
class ComponentC {}

@Component({
  selector: 'my-app',
  template: `
      <h1>Ideas</h1>
      <ng-container *ngFor="let comp of components"
                    [ngComponentOutlet]="comp">
      </ng-container>
  `,
})
export class AppComponent implements AfterViewInit{
  components = [ComponentA, ComponentA, ComponentA, ComponentB, ComponentC];

  @ViewChildren(NgComponentOutlet) viewComponent: QueryList<any>;

  ngAfterViewInit() {
    const justTypeB = this.viewComponent.filter( (c:NgComponentOutlet, index: number) => {
      // filter component of type Component B, and even index
      return (c.ngComponentOutlet ===  ComponentA) && (index % 2 === 0);
    })

    console.log(justTypeB);
  }
}