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?
