Dynamically add components to tabs angular 2

Question

The goal is to dynamically load components from a list and display them with their associated tab. My approach for making tabs is a based off of the this tutorial: https://juristr.com/blog/2016/02/learning-ng2-creating-tab-component/ and

This works great if you want to just hardcode each component by wrapping it in the tab. Sadly this approach fails when trying to dynamically load components in the ng-content.

I did see this answer by yurzui, Creating a angular2 component with ng-content dynamically that was very close to what I am trying to accomplish.

This block of code below (see link above) is where I can't bridge the gap between with this example and mine. I don't know what params to pass to createComponent() in my example. And where to put this code, currently I have createTab directive to hold this code. I keep switching on if I should put the directive on "tabs" element or the "tab" element.

add() {
        const bodyFactory = this.cfr.resolveComponentFactory(CardBodyComponent);
        const footerFactory = this.cfr.resolveComponentFactory(CardFooterComponent);

        let bodyRef = this.vcRef.createComponent(bodyFactory);
        let footerRef = this.vcRef.createComponent(footerFactory);

        const cardFactory = this.cfr.resolveComponentFactory(CardComponent);

        const cardRef = this.vcRef.createComponent(
            cardFactory,
            0,
            undefined,
            [
               [bodyRef.location.nativeElement],
               [footerRef.location.nativeElement]
            ]
        );

        this.components.push(bodyRef, cardRef, footerRef);
    }

The take home message is I would like to put the dynamically created component in place of ng-content of the tab.And then the tabs ng-content would be filled by tab.

Here is my feeble attempt to accomplish this. http://plnkr.co/edit/ieSNgqusP0rwZBMQSvYQ?p=preview