CODEWITHSUNDEEP
angularangular-material2angular5
its me
its me

Reputation: 542

Angular material popup is not working?

login.component.ts

import { Component, OnInit,ViewChild , Inject} from '@angular/core';
import { Login }    from './login';
import {MatPaginator, MatSort, MatTableDataSource, MatDialog,MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})


export class LoginComponent {

  animal: string;
  name: string;

  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    let dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
      width: '250px',
      data: { name: this.name, animal: this.animal }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      this.animal = result;
    });
  }

}

@Component({
  selector: 'app-login',
  templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {

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

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

}

Above i have added my code i am getting below error when i run application any one help me out move forward

ERROR Error: No component factory found for DialogOverviewExampleDialog. Did you add it to @NgModule.entryComponents?
    at noComponentFactoryError (core.js:3901)
       LoginComponent.html:101 ERROR CONTEXT

how to resolve this issue ... i followed this

https://material.angular.io/components/dialog/overview

Upvotes: 1

Views: 8737

Answers (2)

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

You forget to add it in your NgModule definition inside app.module.ts.

So add it there. Below is the sample code. See, I imported MatDialogModule.

@NgModule({
  imports: [
    // ...
    MatDialogModule 
  ],

  declarations: [
    AppComponent,
    ExampleDialogComponent //DialogOverviewExampleDialog
  ],

  entryComponents: [
    ExampleDialogComponent
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule() {}

Explanation:

For any component loaded into a dialog, you must include your component class in the list of entryComponents in your NgModule definition so that the Angular compiler knows to create the ComponentFactory for it.

Upvotes: 8

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41447

In your app.module add the entryComponents property 

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ LoginComponent , DialogOverviewExampleDialog],
  entryComponents: [ DialogOverviewExampleDialog],
  bootstrap: [ App ]
})

Upvotes: 3

Related Questions