How do I pass input and event output to dynamic component in ng-container using ngComponentOutlet?

We have Angular 19 and still is not possible to subscribe to output events, but there are two strategies to handle output events when using ngComponentOutlet:

1. Inject a function using ngComponentOutletInjector and handle the behavior outside the component:

@Component({
  template: `
    <ng-container [ngComponentOutlet]="addressForm"
                  [ngComponentOutletInjector]="injector">
    </ng-container>`
})

export class ParentComponent {
  private injector = Injector.create({
    providers: [
      {
        provide: 'onSubmit',
        useValue: (data: any) => this.handleSubmit(data)
      }
    ]
  });
}

2) Get a reference to the component using ViewChild. This a powerful Angular tecniques as it gives you access to all component properties, methods, and events:

@Component({
  template: `
    <ng-container #componentRef
                  [ngComponentOutlet]="addressForm"
                  [ngComponentOutletInputs]="{ isBilling: isBilling }">
    </ng-container>`
})
export class ParentComponent implements OnDestroy {
  @ViewChild('componentRef', { read: YourComponentType })
  component!: YourComponentType;
  
  private subscription: Subscription;

  ngAfterViewInit() {
    // Check if the output exists before subscribing
    if (this.component.someOutput) {
      this.subscription = this.component.someOutput.subscribe(
        data => this.handleOutput(data)
      );
    }
  }

  ngOnDestroy() {
    if (this.subscription) {
      this.subscription.unsubscribe();
    }
  }
}

Assuming YourComponentType is an abstract class or parent component, all your component should have same outputs methods, otherwise validate in your code the subscription exist before actually subscribe and don't forget to unsubscribe when your component is destroyed.

There is another directive called ngComponentInputs, you just need to set an object in this directive to pass all the @Inputs that you component receives

<ng-container 
   [ngComponentOutlet]="addressForm" 
   [ngComponentInputs]="{isBilling: isBilling}"
    ></ng-container>

But I think there is no way to listen the events from this dynamic components. I have the same problem, quite useless this ngComponentOutlet directive in this scenario. I don't know what is the point of load component dynamically if we can't listen their events from the outside

You can use directive ngComponentOutletInputs, sample is

<ng-container 
   [ngComponentOutlet]="addressForm" 
   [ngComponentOutletInputs]="{adress: existingAdress}"
 ></ng-container>

here is more details https://v16.angular.io/api/common/NgComponentOutlet#fine-tune-control