0

I am making a test application, were I use a dialog when I click on a button. I did everything suggested here (https://material.angular.io/components/dialog/overview), but I cannot understand why it's not working

Instead of showing my component as a dialog, it just shows my dialog on my page (not a dialog) see my screenshot. What is in the red box should be opening as a dialog

https://i.imgur.com/jUQD8Yg.png

I've tried some different things already, also searched some solutions on the internet, even here on StackOverflow. But nothing seems to work at this moment.

Home component:

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { saveAs } from 'file-saver';
import { ok } from 'assert';
declare var require: any;
import {MatDialog, MatDialogConfig} from "@angular/material";
import { TestDialogComponent } from './test-dialog/test-dialog.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(private http: HttpClient, public dialog: MatDialog) {}

 openDialog() {
    const dialogRef = this.dialog.open(TestDialogComponent);

    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  }

Dialog:

import { Component, OnInit, Inject } from '@angular/core';
import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';

@Component({
  selector: 'app-test-dialog',
  templateUrl: './test-dialog.component.html',
})
export class TestDialogComponent {

  constructor(public dialogRef: MatDialogRef<TestDialogComponent>,  @Inject(MAT_DIALOG_DATA) public data: any) { }

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

app.Module

@NgModule({
  declarations: [
    AppComponent,
    TestDialogComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    FormsModule,
    BrowserAnimationsModule,
    MatDialogModule,
    AppRoutingModule,
    DemoMaterialModule,
  ],
  entryComponents: [TestDialogComponent],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
0

2 Answers 2

0

This seems to be a css problem did you include any matrial theme in your application? if not import material theme in your style.css something like

@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';

Stackblitz example

1
  • Thanks that did the trick. Stupid rookie mistake I totally forgot. Aug 14, 2019 at 8:16
0

I forgot the import in my style.css file It works fine now

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.