Matdialog Doesn't Open as Dialog

matDialog doesn't open as dialog

1. Make sure you're openning a dialog box with MatDialog service, and not rendering it using its selector r-create-consultant-modal

import {Component, OnInit} from '@angular/core';

import { MatDialog} from '@angular/material';
import {CreateConsultantModalComponent} from './create-consultant-modal.component';

Lets say component (or service) with function open

@Component({
  selector: 'app-debug-env',
  templateUrl: './debug-env.component.html',
  styleUrls: ['./debug-env.component.css']
})
export class DebugEnvComponent implements OnInit {

  constructor(public dialog: MatDialog) {}

  ngOnInit() { }

  private openDialog(): void {
    let dialogRef = this.dialog.open(CreateConsultantModalComponent, {

    });
  }

}

and html with simple button to call component function (or service function)

<button class="btn btn-primary" type="button" (click)="openDialog()">open</button>

2. Declare your dialog box appropriately, you need to add it to declaration and entrycomponents

@NgModule({
  declarations: [
    CreateConsultantModalComponent,
    DebugEnvComponent,
  ],
  imports: [
    ...
  ],
  entryComponents: [CreateConsultantModalComponent],
  providers: []
})

3. Baby steps see if you can launch a regular pop up, then change template to templateUrl to redirect to the html file.

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'r-create-consultant-modal',
  template: '<p> Pop Up </p>',
  providers: []
})
export class CreateConsultantModalComponent implements OnInit {

  constructor(){}
  ngOnInit(){}

}

Mat-Dialog opening at bottom of page rather than a pop-up window?

I found the solution. I ended up changing my openDialog() function a bit like this example I found online.

openDialog(): void {
    const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      height: '300px'
    });

Doing this combined with everything above worked. Thanks team!

Mat Dialog is not opening up as pop-up

First way: Try adding the following path in angular.json file if not added already:

./node_modules/@angular/material/prebuilt-themes/indigo-pink.css

Make sure to restart ng serve to reload the angular.json file.

Second way: Try importing the following path in style.css file if not imported already:

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

mat-dialog not opening on page load properly

We are using angular lifecycle in the wrong manner.

Define Dialog :-

 openAgeConfirmationDialog() {

    const dialogRef = this.dialog.open(ConfirmationAgeComponent, {
      panelClass: 'dialogBoxStyler'
    });

    dialogRef
      .afterClosed()
      .pipe(takeUntil(this.destroy))
      .subscribe(result => {
        if (result) {
          // I defined over21Agreed to true so that component appears on screen fyi
          this.over21Agreed = true;
        }
      });

  }

Then, call openAgeConfirmationDialog() once in ngOnInit() and once in router.events within ngOninit().

ngOnInit() {

    this.openAgeConfirmationDialog();

    this.router.events.pipe(
      filter((event: RouterEvent) => event instanceof NavigationEnd),
      takeUntil(this.destroy),
      debounceTime(1000)
    ).subscribe(() => {
      this.openAgeConfirmationDialog();
    });

We are using debounceTime because it is bypassing issue caused by the route change.

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

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

MatDialog not showing

As in the chat mentioned: The import of the BrowserAnimationsModule was missing

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  // ...
  imports: [BrowserAnimationsModule],
  // ...
})

MatDialog not displayed correctly

You need to add it to entryComponents on your @NgModule

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { MatDialogModule, MatButtonModule } from '@angular/material';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { HomeComponent, DialogOverviewExampleDialogComponent } from './home/home.component';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    HomeComponent,
    DialogOverviewExampleDialogComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    MatDialogModule,
    MatButtonModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [
    DialogOverviewExampleDialogComponent
  ]
})
export class AppModule { }

Dup of Angular2 material dialog has issues - Did you add it to @NgModule.entryComponents?

angular dialog open is not working

You need to create a dialog within your constructor, without this.dialog.open(...) results in Cannot read property 'open' of undefined:

constructor(public dialog: MatDialog, private webApi: WebapiService) {
}

Angular mat Dialog cant display object values

At the very least, you likely need to change the order of your lines; set the selected team before opening the dialog (which needs a selected team in order to display anything).

this.selectedTeam = team;
this.dialog.open(this.riderDescription);

No good opening the dialog before you've set any values for it to read.

If you want to keep it that way, you'd need to throw in *ngIf checks for every usage of selectedTeam before using it.

The template is attempting to use it ({{selectedTeam.teamName}}) but can't because the object doesn't exist (it's undefined).

---

Related Topics