How to re-render an included component on click function?

Question

I have a list component and in it a dialog which contains a form component that I am using for editing and creating new data. The component is separate (within the same module) and is called inside a dialog like this:

<p-dialog header="Header" width="700" [resizable]="false"
[(visible)]="displayDialog"modal="true">
   <app-detail [id]="id"></app-detail>
</p-dialog>

Create and edit buttons are in the list component html and when I click the edit button an id is supposed to be passed to the detail component and load the data and fill the form for me. But it seems that the detail component is getting rendered just once when the list html renders, and when I click the edit button there's no response, no new id is being passed into the detail component.

What should I do?

Answer 1

Judging from the [(visible)] dialog databinding, it does not destroy/create the <app-detail> component, but simply hides and shows it. So it makes sense that the <app-detail> component is rendered just once.

If you want to recreate the <app-detail> component every time displayDialog changes, just add *ngIf directive to the component.

Like this:

<p-dialog header="Header" width="700" [resizable]="false"
  [(visible)]="displayDialog" modal="true">
   <app-detail [id]="id" *ngIf="displayDialog"></app-detail>
</p-dialog>