primeng dialog does not open after closing

user_3063873 0
Viewed 4451

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>

primeng angular modal-dialog
4 Answers

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;
user_25883270

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

user_149006550
Related