Cannot render another component within an Angular Material dialog/modal

Question

I'm using Material design components for my Angular application. For a few parts of my application, I'm opening a dialog/modal that covers the whole viewport and I want to nest components within that modal.

For example, here is the code to open a dialog/modal:

  openUserAccountModal(): void {
   const dialogRef = this.dialog.open(MyAccountModalComponent, {
    width: '100vw',
    height:  '100vh',
    maxWidth: '100vw',
    maxHeight: '100vh',
    hasBackdrop: false
  });

   dialogRef.afterClosed().subscribe(result => {
    console.log('The dialog was closed');
  });
}

When this dialog/modal opens, I have two main sections, a side navigational menu with different section names and the content I want to display for each section. I'm using [NgSwitch] to display the different sections. Here is a code snippet of what I have now:

 <div *ngSwitchCase="'My Profile'">
            <div class="my-profile">
                <h4 class="my-profile__section-title">My Profile</h4>
                <p class="my-profile__section-description">Add details about your education, industry 
                   of interest,
                    etc.
                </p>
                <mat-card class="my-profile__user-card u-no-shadow">
                    <div class="edit-btn__wrapper">
                        <button *ngIf="!editMode" mat-flat-button color="primary" class="edit-btn"
                            (click)="editUserData()">Edit</button>
                    </div>
                    <div *ngIf="editMode" class="edit-form">
                        <form action="" class="edit-form__image">
                            <mat-list class="edit-form__list">
                                <mat-list-item class="my-profile__user-list--item image-item">
                                    <img class="my-profile__user-list--image" matListAvatar 
                                 [src]="userData.image"
                                        alt="...">
                                </mat-list-item>
                            </mat-list>
                        </form>

Now, onto the question: I want to organize each section into its own component, however, the component won't display when I do so. This is a code snippet of what I want:

<div *ngSwitchCase="'My Profile'">
   <app-my-profile></app-my-profile>

Yet, this code won't render the component. My assumption is that is has to do with it being rendered within the dialog/modal. Any idea of how I can achieve this goal?