CODEWITHSUNDEEP
javascriptangularangular-materialmodal-dialogpopup
Nachum Olman
Nachum Olman

Reputation: 37

How can I fix my dialog window not popping out angular modal

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:

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 => this.personService.addPerson(result));
  }

}

Here is the dialog ts:

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<AddAPersonDialogComponent>) { }

  ngOnInit(): void {
  }

  onCancelClick(): void {
    this.dialogRef.close();
  }

}

The close() function works well: the dialog is erased from the old page but I need it to pop up. Parent html:

<button class="button" (click)="openDialog()">+</button>

Child html:

<h1 mat-dialog-title>Add A Person</h1>
<div mat-dialog-content>
    <label>First Name</label>
    <input matInput [(ngModel)]="person.firstname">
    <label>Last Name</label>
    <input matInput [(ngModel)]="person.lastname">
</div>
<div mat-dialog-actions>
  <button mat-button (click)="onCancelClick()">Cancel</button>
  <button mat-button cdkFocusInitial>Ok</button>
</div>

Upvotes: 0

Views: 2615

Answers (1)

Aleksandar Trninkov
Aleksandar Trninkov

Reputation: 46

Hello so this may not help you a lot but I have 2 things that may be worth checking out, 1 of them is this: https://material.angular.io/components/dialog/overview

specifically it says you need to include this in your providers in:

providers: [
    {provide: MAT_DIALOG_DEFAULT_OPTIONS, useValue: {hasBackdrop: false}}
]

another possibility is that you were asked to import BrowserAnimationsModule, I suspect that this may be what is causing the issue but do not have a good fix for it.

EDIT: For anyone that is currently struggling with this I learned 2 things, the first is that you have to install @angular/material using ng add because that gives you the option to set a theme for your material package.

AND the second more important thing is that for some reason if you want to use this package you have to modify package.json with the following:

{
  "scripts": {
    "postinstall": "ngcc"
  }
}

based on this link: https://angular.io/guide/ivy#speeding-up-ngcc-compilation

Upvotes: 3

Related Questions