primeng dialog does not open after closing

Question

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>

Answer 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

Answer 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;
}