title: How can I fix my dialog window not popping out angular modal
body: <p>I built a list of names and I need to be able to add a name with a popup.
  I set it up using angular materials but the dialog does not pop up, but opens on the bottom of the page instead.
  Here is the parent ts:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MatDialog, MatDialogRef } from '@angular/material/dialog';
  import { Person } from '../person'
  import { PersonService } from '../person.service';
  import { AddAPersonDialogComponent } from '../add-aperson-dialog/add-aperson-dialog.component';
  
  @Component({
    selector: 'app-add-aperson',
    templateUrl: './add-aperson.component.html',
    styleUrls: ['./add-aperson.component.css']
  })
  export class AddAPersonComponent implements OnInit {
  
      person: Person;
  
      constructor(
          public dialog: MatDialog,
          private personService: PersonService
      ) {}
  
    ngOnInit(): void {
    }
  
    openDialog(): void {
      const dialogRef = this.dialog.open(AddAPersonDialogComponent, {
        width: '250px',
        data: {}
      });
  
      dialogRef.afterClosed().subscribe(result =&gt; this.personService.addPerson(result));
    }
  
  }
  </code></pre>
  <p>Here is the dialog ts:</p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { MatDialog, MatDialogRef } from '@angular/material/dialog';
  import { Person } from '../person'
  import { PersonService } from '../person.service';
  
  @Component({
    selector: 'app-add-aperson-dialog',
    templateUrl: './add-aperson-dialog.component.html',
    styleUrls: ['./add-aperson-dialog.component.css']
  })
  export class AddAPersonDialogComponent implements OnInit {
      
      person: Person;
  
    constructor(private personService: PersonService,
      public dialogRef: MatDialogRef&lt;AddAPersonDialogComponent&gt;) { }
  
    ngOnInit(): void {
    }
  
    onCancelClick(): void {
      this.dialogRef.close();
    }
  
  }
  </code></pre>
  <p>The close() function works well: the dialog is erased from the old page but I need it to pop up.
  Parent html:</p>
  <pre><code>&lt;button class=&quot;button&quot; (click)=&quot;openDialog()&quot;&gt;+&lt;/button&gt;
  </code></pre>
  <p>Child html:</p>
  <pre><code>&lt;h1 mat-dialog-title&gt;Add A Person&lt;/h1&gt;
  &lt;div mat-dialog-content&gt;
      &lt;label&gt;First Name&lt;/label&gt;
      &lt;input matInput [(ngModel)]=&quot;person.firstname&quot;&gt;
      &lt;label&gt;Last Name&lt;/label&gt;
      &lt;input matInput [(ngModel)]=&quot;person.lastname&quot;&gt;
  &lt;/div&gt;
  &lt;div mat-dialog-actions&gt;
    &lt;button mat-button (click)=&quot;onCancelClick()&quot;&gt;Cancel&lt;/button&gt;
    &lt;button mat-button cdkFocusInitial&gt;Ok&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>