primeng dialog does not open after closing

Issue

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>

Solution

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

Answered By - Vivek