Angular mat-диалог работы с несколькими формами и шаблонами

Question

Я использую Angular 2+ и работаю с Angular Material Design Mat-Dialog. У меня в приложении разные страницы, и все они используют Mat-Dialog. Т.е. у меня есть страница под названием Languages, где пользователь может добавить язык с помощью Mat-Dialog. У него есть страница Язык, затем Язык-диалог. Это то же самое для любой другой страницы моего приложения, поэтому у меня более 5 компонентов с соответствующими компонентами Dialog.

Моя причина в том, что каждый компонент имеет разное количество свойств и разные поля ввода каждый раз , ни один компонент не является одинаковым.

Образец language-dialog.component. html

  <div *ngIf="action == 'Add'">
<mat-form-field>
  <input
    matInput
    required
    maxlength="3"
    [(ngModel)]="localData.lang"
    type="text"
    placeholder="Enter 2 Character Language Code"
  />
</mat-form-field>

Образец kiosk-dialog.component. html

<div>
  <mat-form-field >
    <input
      matInput
      required
      cdkFocusInitial
      [(ngModel)]="localData.location"
      type="text"
      placeholder="Location"
    />
  </mat-form-field>
</div>

Что я хочу сделать так, как Angular сделано, чтобы быть ONE Диалог для каждой страницы в моем приложении, так что я могу вставить просто <app-dialog></app-dialog> в родительский компонент, который отображает пользователю таблицу с данными и информацией о странице.

Мое решение работает, но я знаю, что там гораздо лучшие, которые могут значительно уменьшить размер моего приложения. Любая помощь приветствуется, спасибо!