Prime ng p-inplace 内容和显示模板未显示

Question

I'm working with p-inplace of primeNg and I am using primeg version 14.1.2 . But unfortunately, there is nothing showing inside the ng-template for both content and display. Does anybody have any idea how to solve this?

I am attaching the stackblitz url - https://stackblitz.com/edit/angular-r9l7kg?file=src/main.ts

Answer 1

I have found the solution, Instead of ng-template we have to use the component selectors. Because there are two separate components one for display and another for content. So I have changed the HTML to something like this -

<p-inplace>
   <span pInplaceDisplay> Click to Edit </span>
   <span pInplaceContent>
      <input type="text" [value]="rowData[col.field]" pInputText />
   </span>
</p-inplace>