0

I am using Angular PrimeNG and I have the following scenario

<button (click)="display = !display">Open</button>
<p-dialog [(visible)]="display">
    <custom-component [uid]="userId"></custom-component>
</p-dialog>

Problem here is whenever I try to open the p-dialog, the custom component is not called again, how do I make sure the component is loaded again to make sure the modal has latest data every time its opened?

Antikhippe
  • 6,316
  • 2
  • 28
  • 43
Syed Faizan
  • 901
  • 3
  • 14
  • 28

1 Answers1

4

One way is to add an *ngIf statement to the component. So whenever the flag is false the component is destroyed. Opening the dialog again should create the component again.

Iulian Cucoanis
  • 195
  • 2
  • 6
  • i also thought the same, tried it too, still doesn't work, the modal opens with old data – Syed Faizan Mar 05 '18 at 11:45
  • 1
    You can use the flag as an input and reload the data in the component. HTML: `` TS custom-component: `@Input() set isVisible(visible: boolean) { // Reload data when visible is true }` edit: formatting – Iulian Cucoanis Mar 05 '18 at 11:50
  • hmm makes sense, ill try this tomorrow (I'm off work now) and return back – Syed Faizan Mar 05 '18 at 12:27