Angular: Rendering component form using ngComponentOutlet

Question

I'm rendering many dynamic components using ngComponentOutlet inside a loop to create a tab interface but when rendering a component with a form, the form appears to be disabled. The issue is being caused by my injector, if I remove the injector it works fine. My code reads as follows:

DASHBOARD HTML

<mat-tab-group>
    <mat-tab *ngFor="let tab of getTabService().tabs; let i = index" id="{{ i }}">
        <ng-template mat-tab-label>
            <span>{{tab.label}}</span>
        </ng-template>
        <ng-container *ngComponentOutlet="tab.component; injector: injectTab( tab )">          
        </ng-container>
    </mat-tab>
</mat-tab-group>

DASHBOARD COMPONENT

...
import { Tab } from './../../models/tab.model'

const TAB = new InjectionToken<any>('tab');

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

    tabInjector: Injector;

    constructor(
      private injector: Injector,
      @Inject('tabService') private tabService
    ) {}

    ...

    injectTab( tab ) {

      const injector =
    this.tabInjector = ReflectiveInjector.resolveAndCreate([{ provide: Tab, useValue: tab }], this.injector)

      return this.tabInjector
    }
}

CHILD COMPONENT WITH INJECTED DATA AND FORM THAT APPEARS DISABLED

...
import { Tab } from './../../models/tab.model'

@Component({
  selector: 'app-search',
  templateUrl: './search.component.html',
  styleUrls: ['./search.component.scss']
})
export class SearchComponent implements OnInit {

    searchForm: FormGroup

    constructor(
        @Inject('orderService') private orderService,
        @Inject('tabService') private tabService,
        public tab: Tab,
        private fb: FormBuilder
    ) {}

    ngOnInit() {
        this.createForm()
    }

    /**
     * Create an instance of the form complete with validators
     */
    createForm() : void {

        this.searchForm = this.fb.group({
            order_number: [null],
        });
    }
    ...
}

Apologies for all the code but any advice or ideas and what I have done wrong is appreciated. The data has been successfully passed to the child component and I can render the injected data inside the view.

Never used Injectors before, total novice. Probably a simple mistake on my behalf.

Answer 1

This issue has been raised as an issue and awaiting resolution. Details can be seen at https://github.com/angular/angular/issues/15360