Is it possible to bubble the event from dynamically loaded child component to parent?

Question

I need to emit/bubble the event from the dynamically loaded child component to its parent component. I have parent component which has angular tabs in it. Inside the tab I load the child components dynamically. Since these are dynamically loaded I am not able bubble up the events raised from the child component to its parent component.

The event gets triggered in the child component but it is not being listened by the parent?

My Parent component which contains the tabs are as follows:

 <div fxLayout="column" fxLayout.gt-sm="row">
    <md-tab-group class="tab-group" dynamicHeight (selectedIndexChange)="onTabChange($event)" style="width:100%; height:100%">
      <md-tab *ngFor="let tab of homepageTabs; let i = index">
        <ng-template mdTabLabel>{{tab.label}}</ng-template>
      </md-tab>
    </md-tab-group>
  </div>
  <div>
    <div #tabContent></div>
  </div>

Component code

    export class HomePageComponent implements OnInit {

      private tabContentComponents = [
      ];

      @ViewChild('tabContent', { read: ViewContainerRef })
      tabContent: ViewContainerRef;

      // Model for tabs
      homepageTabs = [
        {
          label: 'HomeLabel',
          tabTitle: 'HomeTitle'
        },
        {
          label: 'App Details',
          tabTitle: 'App Details'
        }
      ];
      constructor(private router: Router, private cfr: ComponentFactoryResolver) {
      }

//this is the place where I am loading the child component dynamically based on some logic...
      onTabChange(tabIndex) {
        console.log("tabIndex : " + tabIndex);
        if (tabIndex == 0) {
          const factory = this.cfr.resolveComponentFactory(ApplicationListComponent);
          this.tabContent.clear();
          this.tabContent.createComponent(factory);
        }
        if (tabIndex == 1) {
          const factory = this.cfr.resolveComponentFactory(ApplicationDetailsComponent);
          this.tabContent.clear();
          this.tabContent.createComponent(factory);
        }
      }

      //This is the event which needs to be bubbled up from the child component     
      OpenReportListEvent(event: any) {
        //do something here
      }
    }

My child component looks like below,

export class ApplicationListComponent implements OnInit {

  @Output() openReportListEvent = new EventEmitter();

  constructor(){
    }

  //This is the event which needs to emit to the parent component
  OpenReportList(application: any)
  {
    this.openReportListEvent.emit();
  }
}

How to raise the events to the parent component in this scenario?

Answer 1

I assume that this.tabContent.createComponent(factory); returns ComponentRef , so you basically can get a hold of an instance and bind directly to that property:

const componentRef = this.tabContent.createComponent(factory);
componentRef.instance.openReportListEvent.subscribe((v)=>{this.OpenReportListEvent(v)})