Angular mat-dialog working with multiple forms and templates

Question

I am using Angular 2+ and working with Angular Material Design Mat-Dialog. I have different pages in my app and they all use Mat-Dialog. I.e I have a page called Languages where user is able to add a language using Mat-Dialog. It has the page Language, then Language-dialog. This is the same for every other page in my app, so I have over 5 components with their respective Dialog components following.

My Reasoning for this was that each component has different amounts of properties and different input fields every time, no one component is the same.

Sample of the 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>

Sample of kiosk-dialog.component.html

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

What I Want to do is how Angular is made to be ONE Dialog for every page throughout my app so I can insert just a simple <app-dialog></app-dialog> in the parent component that displays to the user a table with the data and information about the page.

My Solution works but I know there are much better ones out there that can greatly reduce the size of my app. Any help is appreciated, thanks!