Dynamic Content Projection Angular MatDialog

Question

Imagine a project structure like this:

app
--lazyModA
----ATable
--lazyModB
----BTable
--shared
----DialogWithTables

We need to have a MatDialog in both lazyModA and lazyModB which are both lazy loaded which is able to display the MatTables ATable or BTable in the respective case. [In practise I will have at least 5 of those modules and tables]

Apart from the different Table the dialogs are exactly the same, which is why I would like to put it into the shared module. But here lies the problem. If I hardcode the tables in the template of DialogWithTables it would always load all my lazy modules once the Dialog opens anywhere.

The idea was to use ContentProjection but since we are instantiating the Dialog in Typescript that seams to be out of the picture.

I have tried to pass the content via the MAT_DIALOG_DATA Injection Token like this:

this.dialog.open(DialogWithTables,
  {data: {content:'<app-a-table [dataSource]="dataSource"></app-a-table>'}
  }
)

and different variations on the syntax but nothing seems to work as intended. I would really like to do this the clean way and not define seperate dialogs for each module.

My compromise which I am currently programming would be to define seperate dialogs but having them use the traditional content projection.

<app-dialog-with-tables>
  <app-a-table [dataSource]="dataSource"></app-a-table>
</app-dialog-with-tables>

But this still feels unsatisfying to me. Any help tricks or suggestion is welcome :)

---UPDATE---

I found this post which recommended using the *ngComponentOutlet which seems to be working just fine. Now I am just struggling to get my dataSource into the mix.