Dialogue not displaying properly when clicked

Question

I'm testing on popping up a dialog modal from this tutorial from https://github.com/gopinav/Angular-Material-Tutorial/tree/master/material-demo/src/app based on the dialog-example and dialog folder.

however when running it to test in my localhost, i'm receiving this error

No component factory found for ModalComponent. Did you add it to @NgModule.entryComponents?

I've split it up like this

nav.html

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="d-flex container">
        <div class="navbar-brand redirect" routerLink="">Gigworks Authentication</div>
        <div class="d-flex ml-auto">
            <div class="nav-link redirect" *ngIf="isLoggedOut$ | async" (click)="openModal()">Login</div>
            <div *ngIf="isLoggedIn$ | async" (click)="this.toggle()">
                <div class="nav-link redirect" *ngIf="(user$ | async) as user" routerLink="dashboard">
                    {{(user.username)}}</div>
            </div>
            <div class="nav-link redirect" (click)="logout()" *ngIf="isLoggedIn$ | async">Logout</div>
        </div>
    </div>
</nav>

nav.ts

import { Component, OnInit } from '@angular/core';
import {Observable} from 'rxjs';
import {map} from 'rxjs/operators';
import { AngularFireAuth } from "@angular/fire/auth";
import { MatDialog } from '@angular/material';
import { ModalComponent } from '../../modal/modal.component';

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

  constructor(
    public afAuth: AngularFireAuth,
    public dialog: MatDialog
    ) { }

  ...

  openModal() {
    let dialogRef = this.dialog.open(ModalComponent)
    dialogRef.afterClosed().subscribe(result => {
      console.log(`Dialog result: ${result}`);
    });
  };
}

And for the modal.html

<h2 mat-dialog-title>Welcome Back</h2>
<mat-dialog-content>Lorem Ipsum</mat-dialog-content>
<mat-dialog-actions>
  <button mat-button mat-dialog-close="true">Keep me logged in</button>
  <button mat-button mat-dialog-close="false">Log out</button>
</mat-dialog-actions>

modal.ts

import { Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class ModalService {
    private modals: any[] = [];

    open(id: string) {
        // open modal specified by id
        let modal: any = this.modals.filter(x => x.id === id)[0];
        modal.open();
    }

    close(id: string) {
        // close modal specified by id
        let modal: any = this.modals.filter(x => x.id === id)[0];
        modal.close();
    }
}

Could I have missed something that is triggering this error message?

Answer 1

I guess you have missed to add in entryComponents and declarations arrays in app.module.ts file. Please add it. The material alert opens automatically by

let dialogRef = this.dialog.open(ModalComponent)

you don't need to open this inside the component again.

import {ModalService} from './Components/ModalService.component';
declarations: [
.
.
.,
ModalService
],
entryComponents: [
.
.
.,
ModalService
]

Also please don't keep mat-dialog-close attribute in buttons, just add click functions as you have some operation to do before the modal closes. You can do this.

<mat-dialog-actions>
   <button mat-button (click)="keepLoggedIn()">Keep me logged in</button>
   <button mat-button (click)="logout()">Log out</button>
</mat-dialog-actions>

logout() {
  this.dialogRef.close({data:[], status: 'success'});
}

keepLoggedIn() {
  this.dialogRef.close({data:[], status: 'success'});
}