Issue with content projection through ng-content in Angular

Question

I created a reusable modal component for my Angular project, which consists of a modal.service.ts file which handles the creation of the modal component when initiated. The content of the modal is displayed through ng-content inside the modal template file. The content that needs to be displayed is kept inside ng-template inside the template file of the parent, which is fed to the service file. Everything works fine until I tried to pass other components. For example I have an input-field component and a button component. When I try to add these components inside the ng-template to render it inside the ng-content, it does not get rendered properly. I noticed that the native attribures gets rendered correctly, but the properties that are passed through binding are not getting rendered.

parent.component.html

<custom-button label="Open View Modal" (click)="openViewModal(viewModalTemplate)"></custom-button>

<ng-template #viewModalTemplate>
    <ng-container>
        <div>View modal content</div>
        <custom-input-field [required]="true" componentStyle="width: 600px"></custom-input-field>
        <custom-button label="Submit"></custom-button>
    </ng-container>
</ng-template>

parent.component.ts

constructor(private modalService: ModalService) {}

openViewModal(modalTemplate: TemplateRef<any>) {
    this.modalService.open(modalTemplate).subscribe((action) => {
      console.log('Modal action: ', action);
    });

}