Issue
I'm trying to use a MatDialog
and based on this example I've implemented that dialog as follows:
import {Component, Inject, OnInit} from '@angular/core';
import {Router} from '@angular/router';
import {AuthenticationService} from '../../../service/authentication.service';
import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent {
constructor(private router: Router, public dialog: MatDialog) { }
openDialog(): void {
const dialogRef = this.dialog.open(CreateGroupDialogComponent);
}
}
@Component({
selector: 'app-create-group-dialog',
template: `
<span>Hello World!</span>
`
})
export class CreateGroupDialogComponent {
constructor(public dialogRef: MatDialogRef<CreateGroupDialogComponent>) { }
}
However, even though the dialog comes up as I press the according button, what I get it this:
The HTML template gets not displayed and the dimensions of the modal is wrong.
I don't see what the problem is. Why is the modal not correctly drawn?
This is the generated HTML code when opening the modal. As can be seen it's empty.
Solution
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?
Answered By - flamusdiu
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.