'primeng dialog does not open after closing

I have created dialog as component inside another component. Dialog opens without issue but after closing and trying reopen it id not visible.

Parent component 

import { Component,OnInit } from '@angular/core';
import { PostComponent } from './post/post.component';

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

  display: boolean;

  ngOnInit(): void {
  }
  
  openAdvancedSearch() {
    this.display = true;
    console.log("Display is set");
  }
 
  constructor() {
  }
}

parent html

 <app-post [display]="display"></app-post>
  <button type="button" class="btn btn-primary col" 
                (click)="openAdvancedSearch()" [style.width.px]="150">Advanced Search</button>

Dialog component

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';

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

  @Input()
  display: boolean = false;
  publishedAfter: Date;
  publishedBefore:Date;

  constructor() { }

  ngOnInit() {
  }
}

Dialog html has a button clicking on which closes dialog 

  <p-dialog header="Title" [(visible)]="display" [width]="500" 
      [contentStyle]="{'overflow':'visible'}">
     <p-calendar [(ngModel)]="publishedAfter" [showIcon]="true" 
                    [style.width.px]="150"></p-calendar>

     <p-calendar [(ngModel)]="publishedBefore" [showIcon]="true" 
                    [style.width.px]="150"></p-calendar>

     <p-footer>
        <div class="ui-dialog-buttonpane ui-widget-content ui-helper-clearfix">
        <button (click)="display=false">Close</button>
      </div>  
     </p-footer>  
  </p-dialog>
angularmodal-dialogprimeng


Solution 1:[1]

Thanks i was able to solve issue output EventEmitter. Crux is to modify value of display property only from parent component and not from child component. When close is called generate an event which will be intercepted by parent and it will set value of display as false

Solution 2:[2]

Adding the code to solve the problem

Child Component HTML

<p-dialog header="Reschedule Unassigned Task" [(visible)]="_display" modal="modal" width="700" [responsive]="true" [blockScroll]=true (onHide)="onHide($event)">

Child Component

@Input() get display(): string {
    return this._display;
}

set display(value: string) {
    console.log('set display ' + value)
    this._display = value;
    this.onDisplayChange.emit(this._display);
}

@Output() onDisplayChange: EventEmitter<string> = new EventEmitter<string>();

@Output() onClose: EventEmitter<string> = new EventEmitter<string>();

onHide(e: any) {
    this.onClose.emit(this._display);
}

Parent Component calling child

<reschedule-dialog [(display)]="rescheduleDialogDisplay"
                           (onClose) = "onClose()"
                           [selectedItem]="selectedItemToReschedule


onClose() {
    this.rescheduleDialogDisplay = null;
    this.selectedItemToReschedule = null;
}

Solution 3:[3]

I know this is an old question but still, I am providing a different solution to this issue. If you don't want to generate the output event from the child component then you can set use service to set the visible property fo the p-dialog control.

<p-dialog [(visible)]="dialogContentService.showDialog" [modal]="true"

In the child component:

this.dialogContentService.showDialog  = false;

Solution 4:[4]

I managed to solve this issue but there are some key points missed in all the answers.

When you click 'close' in the top right it runs close() in the child component.

It is here where you have to emit the change back to the parent:

export class child-comp implements OnInit { 
@Input() showDialog: boolean; 
@Output() closeDialog = new EventEmitter<any>();
  close() {
    console.log('calling on close'); 
    this.closeDialog.emit();
  }
}

Then in the parent component you need to receive this emit and have a function act on it which update the display state 'Only control the display state in the parent component' as previously suggested.

<child-comp [showDialog]="showDialog" (closeDialog)="updateDialog()"></child-comp>

updateDialog() {
  this.showDialog = false;
  console.log(this.showDialog);
}

Hope this is a help

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Vivek
Solution 2 Sacky San
Solution 3 Bhupendra Shukla
Solution 4 JustCoder

Related Questions