diff --git a/apps/showcase/doc/inplace/basicdoc.ts b/apps/showcase/doc/inplace/basicdoc.ts
index 62ece2161c6..71c3ede01d8 100644
--- a/apps/showcase/doc/inplace/basicdoc.ts
+++ b/apps/showcase/doc/inplace/basicdoc.ts
@@ -10,10 +10,10 @@ import { Component } from '@angular/core';
         </app-docsectiontext>
         <div class="card">
             <p-inplace>
-                <ng-template pTemplate="display">
+                <ng-template #display>
                     <span>View Content</span>
                 </ng-template>
-                <ng-template pTemplate="content">
+                <ng-template #content>
                     <p class="m-0">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                         consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
@@ -27,10 +27,10 @@ import { Component } from '@angular/core';
 export class BasicDoc {
     code: Code = {
         basic: `<p-inplace>
-    <ng-template pTemplate="display">
+    <ng-template #display>
         <span>View Content</span>
     </ng-template>
-    <ng-template pTemplate="content">
+    <ng-template #content>
         <p class="m-0">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit...
         </p>
@@ -38,10 +38,10 @@ export class BasicDoc {
 </p-inplace>`,
         html: `<div class="card">
     <p-inplace>
-        <ng-template pTemplate="display">
+        <ng-template #display>
             <span>View Content</span>
         </ng-template>
-        <ng-template pTemplate="content">
+        <ng-template #content>
             <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
         </ng-template>
     </p-inplace>
diff --git a/apps/showcase/doc/inplace/imagedoc.ts b/apps/showcase/doc/inplace/imagedoc.ts
index 6571444350b..3e6d4892bd5 100644
--- a/apps/showcase/doc/inplace/imagedoc.ts
+++ b/apps/showcase/doc/inplace/imagedoc.ts
@@ -10,13 +10,13 @@ import { Component } from '@angular/core';
         </app-docsectiontext>
         <div class="card">
             <p-inplace>
-                <ng-template pTemplate="display">
+                <ng-template #display>
                     <span class="inline-flex items-center gap-2">
                         <span class="pi pi-image" style="vertical-align: middle"></span>
                         <span class="ml-2">View Photo</span>
                     </span>
                 </ng-template>
-                <ng-template pTemplate="content">
+                <ng-template #content>
                     <img class="w-full sm:w-80 shadow-md" src="https://primefaces.org/cdn/primeng/images/demo/galleria/galleria5.jpg" alt="Nature" />
                 </ng-template>
             </p-inplace>
@@ -27,13 +27,13 @@ import { Component } from '@angular/core';
 export class ImageDoc {
     code: Code = {
         basic: `<p-inplace>
-    <ng-template pTemplate="display">
+    <ng-template #display>
         <span class="inline-flex items-center gap-2">
             <span class="pi pi-image" style="vertical-align: middle"></span>
             <span class="ml-2">View Photo</span>
         </span>
     </ng-template>
-    <ng-template pTemplate="content">
+    <ng-template #content>
         <img
             class="w-full sm:w-80 shadow-md"
             src="https://primefaces.org/cdn/primeng/images/demo/galleria/galleria5.jpg"
@@ -43,13 +43,13 @@ export class ImageDoc {
 </p-inplace>`,
         html: `<div class="card">
     <p-inplace>
-        <ng-template pTemplate="display">
+        <ng-template #display>
             <span class="inline-flex items-center gap-2">
                 <span class="pi pi-image" style="vertical-align: middle"></span>
                 <span class="ml-2">View Photo</span>
             </span>
         </ng-template>
-        <ng-template pTemplate="content">
+        <ng-template #content>
             <img
                 class="w-full sm:w-80 shadow-md"
                 src="https://primefaces.org/cdn/primeng/images/demo/galleria/galleria5.jpg"
diff --git a/apps/showcase/doc/inplace/inputdoc.ts b/apps/showcase/doc/inplace/inputdoc.ts
index 80c0750a221..854247be5a8 100644
--- a/apps/showcase/doc/inplace/inputdoc.ts
+++ b/apps/showcase/doc/inplace/inputdoc.ts
@@ -13,10 +13,10 @@ import { Component } from '@angular/core';
         </app-docsectiontext>
         <div class="card">
             <p-inplace>
-                <ng-template pTemplate="display">
+                <ng-template #display>
                     <span>Click to Edit</span>
                 </ng-template>
-                <ng-template pTemplate="content" let-closeCallback="closeCallback">
+                <ng-template #content let-closeCallback="closeCallback">
                     <span class="inline-flex items-center gap-2">
                         <input type="text" pInputText [pAutoFocus]="true" />
                         <button (click)="closeCallback($event)" pButton icon="pi pi-times" text severity="danger"></button>
@@ -30,10 +30,10 @@ import { Component } from '@angular/core';
 export class InputDoc {
     code: Code = {
         basic: `<p-inplace>
-    <ng-template pTemplate="display">
+    <ng-template #display>
         <span>Click to Edit</span>
     </ng-template>
-    <ng-template pTemplate="content" let-closeCallback="closeCallback">
+    <ng-template #content let-closeCallback="closeCallback">
         <span class="inline-flex items-center gap-2">
             <input type="text" pInputText autofocus />
             <button (click)="closeCallback($event)" pButton icon="pi pi-times" text severity="danger"></button>
@@ -42,10 +42,10 @@ export class InputDoc {
 </p-inplace>`,
         html: `<div class="card">
     <p-inplace>
-        <ng-template pTemplate="display">
+        <ng-template #display>
             <span>Click to Edit</span>
         </ng-template>
-        <ng-template pTemplate="content" let-closeCallback="closeCallback">
+        <ng-template #content let-closeCallback="closeCallback">
             <span class="inline-flex items-center gap-2">
                 <input type="text" pInputText autofocus />
                 <button (click)="closeCallback($event)" pButton icon="pi pi-times" text severity="danger"></button>
diff --git a/apps/showcase/doc/inplace/lazydoc.ts b/apps/showcase/doc/inplace/lazydoc.ts
index c4622fdfee3..4b9e5b1a4f4 100644
--- a/apps/showcase/doc/inplace/lazydoc.ts
+++ b/apps/showcase/doc/inplace/lazydoc.ts
@@ -17,7 +17,7 @@ import { Component } from '@angular/core';
                 </ng-template>
                 <ng-template #content>
                     <p-table [value]="products" responsiveLayout="scroll">
-                        <ng-template pTemplate="header">
+                        <ng-template #header>
                             <tr>
                                 <th>Code</th>
                                 <th>Name</th>
@@ -25,7 +25,7 @@ import { Component } from '@angular/core';
                                 <th>Quantity</th>
                             </tr>
                         </ng-template>
-                        <ng-template pTemplate="body" let-product>
+                        <ng-template #body let-product>
                             <tr>
                                 <td>{{ product.code }}</td>
                                 <td>{{ product.name }}</td>
@@ -52,7 +52,7 @@ export class LazyDoc {
     </ng-template>
     <ng-template #content>
         <p-table [value]="products" responsiveLayout="scroll">
-            <ng-template pTemplate="header">
+            <ng-template #header>
                 <tr>
                     <th>Code</th>
                     <th>Name</th>
@@ -60,7 +60,7 @@ export class LazyDoc {
                     <th>Quantity</th>
                 </tr>
             </ng-template>
-            <ng-template pTemplate="body" let-product>
+            <ng-template #body let-product>
                 <tr>
                     <td>{{ product.code }}</td>
                     <td>{{ product.name }}</td>
@@ -78,7 +78,7 @@ export class LazyDoc {
         </ng-template>
         <ng-template #content>
             <p-table [value]="products" responsiveLayout="scroll">
-                <ng-template pTemplate="header">
+                <ng-template #header>
                     <tr>
                         <th>Code</th>
                         <th>Name</th>
@@ -86,7 +86,7 @@ export class LazyDoc {
                         <th>Quantity</th>
                     </tr>
                 </ng-template>
-                <ng-template pTemplate="body" let-product>
+                <ng-template #body let-product>
                     <tr>
                         <td>{{ product.code }}</td>
                         <td>{{ product.name }}</td>