title: Angular mat-dialog working with multiple forms and templates
body: <p>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.</p>
  
  <p>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.</p>
  
  <p>Sample of the <strong>language-dialog.component.html</strong></p>
  
  <pre><code>  &lt;div *ngIf="action == 'Add'"&gt;
  &lt;mat-form-field&gt;
    &lt;input
      matInput
      required
      maxlength="3"
      [(ngModel)]="localData.lang"
      type="text"
      placeholder="Enter 2 Character Language Code"
    /&gt;
  &lt;/mat-form-field&gt;
  </code></pre>
  
  <p></p>
  
  <p>Sample of <strong>kiosk-dialog.component.html</strong></p>
  
  <pre><code>&lt;div&gt;
    &lt;mat-form-field &gt;
      &lt;input
        matInput
        required
        cdkFocusInitial
        [(ngModel)]="localData.location"
        type="text"
        placeholder="Location"
      /&gt;
    &lt;/mat-form-field&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I <strong>Want</strong> to do is how Angular is made to be <strong>ONE</strong> Dialog for every page throughout my app so I can insert just a simple 
  <code>&lt;app-dialog&gt;&lt;/app-dialog&gt;</code> in the parent component that displays to the user a table with the data and information about the page.</p>
  
  <p>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!</p>