Можно ли получить модальное содержимое из тега div вместо Component in Angular Material

Question

У меня есть угловой компонент с именем legend с содержанием html, как показано ниже.

legend.component.html

<div class="NotAModalContent">
   <label class="mat-option-text-label" (click)="openProficiencyLegendDialog()">Proficiency?</label>
</div>
<mat-dialog-content>
       Modal data content goes here
</mat-dialog-content>
<mat-dialog-actions>
        Dialog actions goes here
</mat-dialog-actions>

И я открываю этот компонент как диалоговое окно от другого компонента, называемого навыками, как показано ниже.

skills.Component.ts

openProficiencyLegendDialog(): void {
    this.dialog.open(LegendComponent, {
      width: '500px'
    });
  }

Но здесь я не хочу, чтобы немодальное содержимое компонента легенды было частью диалога.

Может быть что-то вроде

openProficiencyLegendDialog(): void {
        this.dialog.open('Specify Div Tag instead of component', {
          width: '500px'
        });
      }

Идея состоит в том, чтобы сделать этот модальный компонент многоразовым. Где бы я ни хотел использовать это диалоговое окно модели, мне просто нужно использовать

Answer 1

Если вы хотите только определенный контент из компонента, вы должны использовать ng-template. Оберните содержимое, которое вы хотели бы в ng-шаблон, и обратитесь к шаблону вместо самого компонента. Я нашел stackblitz, у которого есть хороший пример для этого, используя TemplateRef и без: https://stackblitz.com/edit/ng-template-mat-dialog?file=app%2Fapp.component.html