How to pass a form into Angular Material dialog

I need to create a reusable form dialog to visualize different forms. I am using Angular 17 and Angular Material. In my component I am trying to define a form like that:

    <form #myForm="ngForm" (ngSubmit)="submitForm(myForm)">
  <mat-form-field>
    <input matInput [matDatepicker]="picker" placeholder="Choose a date" name="date" ngModel required>
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
    <mat-error *ngIf="myForm.controls.date.invalid && myForm.controls.date.touched">Please choose a date.</mat-error>
  </mat-form-field>

  <mat-form-field>
    <input matInput placeholder="First Name" name="firstName" ngModel required>
    <mat-error *ngIf="myForm.controls.firstName.invalid && myForm.controls.firstName.touched">Please enter a first name.</mat-error>
  </mat-form-field>

  <button mat-raised-button color="primary" type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

In my .ts file I have a method to open a dialog:

 @ViewChild('myForm', { static: true }) public myForm: ElementRef;

public openDialog(): void {
        const dialogRef = this.dialog.open(FilterFormDialogComponent, {
            width: '460px',
            disableClose: true,
            autoFocus: false,
            panelClass: 'form-dialog',
            data: {
              form: this.myForm // reference to the form previously defined
            },
        });
    }

In my filterFormDialogComponent I am trying to visualize the inserted form in its html by using ng-content. However, I am unable to visualize the form.

Is it possible to pass a form or another component into a dialog by using MAT_DIALOG_DATA? If so, how to display it properly into the html of the dialog?