How to bind parent component using child component's event property using `lazy loading` in Angular 9

Question

I am converting some components to be lazily loaded using the ivy compiler in Angular 9.

This is my code at the moment:

<bulk-user-upload [visible]="bulkUserUploadVisible (fileUploaded)="onBulkUserUploadFileUploaded($event)">

and I am trying to modify the code become like this:

<ng-container #bulkUserUpload></ng-container>

I want to access the fileUploaded function that exists in the child component so I can listen the event on the parent component.

const { BulkUserUploadComponent } = await import('../bulk-user-upload/bulk-user-upload.component');
const bulkUserUploadFactory = this.cfr.resolveComponentFactory(BulkUserUploadComponent);
const { instance } = this.bulkUserUploadContainer.createComponent(bulkUserUploadFactory, null, this.injector);

instance.visible = true;

How do I modify the code above so that I can access child the function?

Answer 1

So I added this to my parent component

instance.fileUploaded.pipe(
      takeUntil(instance.destroy$)
    ).subscribe(resp => this.onBulkUserUploadFileUploaded(resp));

and this to the child destroy$ = new Subject();