mat dialog that is used in fullcalendar opens twice

Question

I am using mat dialog which is executed when an event is clicked on ap-fullcalendar. I am using Angular6.

When I single click an event, the following dialog box appears, without any info.

Once I have pressed the "buy" button, it then takes me to the actual dialog box.

Note: The buttons don't seem work as expected, however, I think this is down to my original problem. ALSO, when I double click my event, I get different behaviour where the dialog box opens as shown in the first screen shot. When I press or cancel, it closes fine.

Any help is appreciated!

My main component TS:

import { Component, OnInit, ViewChild, Inject } from '@angular/core';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { CalendarComponent } from 'ap-angular2-fullcalendar/src/calendar/calendar';
import { CalendarService } from '../_services/calendar.service';
import { DialogComponentComponent } from './dialog-component/dialog-component.component';

export interface DialogData {
  animal: string;
  name: string;
}

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent{

  calendarOptions: any;
  displayEvent: any;
  @ViewChild(CalendarComponent) ucCalendar: CalendarComponent;
  animal: string;
  name: string;
  subjectFilter: string;

  constructor(protected calendarService: CalendarService, private dialog: MatDialog) { }

  ngOnInit(){
    this.calendarService.getEvents(this.subjectFilter).subscribe(data => {
      console.log(data);
      this.calendarOptions = {
        editable: true,
        eventLimit: false,
        header: {
          left: 'prev,next today',
          center: 'title',
          right: 'month,agendaWeek,agendaDay,listMonth'
        },
        events: data,
        eventClick: (calEvent, jsEvent, view) => {
          this.openDialog(calEvent);

          console.log('Event: ' + calEvent.title);
          console.log('Coordinates: ' + jsEvent.pageX + ',' + jsEvent.pageY);
          console.log('View: ' + view.name);
        },
      };
    });
  }

  openDialog(calEvent): void {
    console.log("opendialog");
    const dialogRef = this.dialog.open(DialogComponentComponent, {
      data : {
        title: calEvent.title,
        start: calEvent.start,
        end: calEvent.end,
        price: calEvent.price
      }
    });

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

My main component HTML

<div *ngIf="calendarOptions">
  <angular2-fullcalendar #ucCalendar [options]="calendarOptions" (eventDrop)="updateEvent($event.detail)"
              (eventResize)="updateEvent($event.detail)">
  </angular2-fullcalendar>
</div>

My dialog component TS:

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

@Component({
  selector: 'app-dialog-component',
  templateUrl: './dialog-component.component.html',
  styleUrls: ['./dialog-component.component.css']
})
export class DialogComponentComponent {

  constructor(
    public dialogRef: MatDialogRef<DialogComponentComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any
  ) {console.log("constructor");}

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

My dialog component HTML:

<h2 mat-dialog-title>{{data.title}}</h2>

<mat-dialog-content>
  <p>Lesson Details:</p>
  <p>Start - {{data.start}}</p>
  <p>End - {{data.end}}</p>
  <p>Price - {{data.price}}</p>
</mat-dialog-content>

<mat-dialog-actions>
  <button mat-raised-button mat-button>Cancel</button>

  <button mat-raised-button (click)="onNoClick()">Buy</button>
</mat-dialog-actions>

Answer 1

I was running into an issue very similar to this. I was scouring the web and trying to see if there were any clues as to fix, as it doesn't look like you came up with an answer.

I was able to get the problem to fix itself, but I am unsure what exactly did it. What I did was an npm update and then removed the node_modules folder and ran a fresh npm install

Next I ran across a few other questions where some people were having similar problems. It looks like you could get the problem to occur pretty easily by having the dialog popup via a window call. Turns out that some of the problem is that the dialog coming up was happening outside of the NgZone, so to fix, import {NgZone} from '@angular/core', include that in your constructor constructor(private dialog: MatDialog, readonly ngZone: NgZone) and then use that when opening the dialog

this.ngZone.run(() => {
 const ref = this.dialog.open(DialogComponent, {
  options..,
  data: {}
 });
 ...
});`