diff --git a/apps/showcase/doc/popover/datatabledoc.ts b/apps/showcase/doc/popover/datatabledoc.ts
index a84925dd1c8..c2ee1f8a412 100644
--- a/apps/showcase/doc/popover/datatabledoc.ts
+++ b/apps/showcase/doc/popover/datatabledoc.ts
@@ -14,7 +14,7 @@ import { Popover } from 'primeng/popover';
         </app-docsectiontext>
         <div class="card">
             <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }" [paginator]="true" [rows]="5">
-                <ng-template pTemplate="header">
+                <ng-template #header>
                     <tr>
                         <th class="w-1/6">Id</th>
                         <th class="w-1/6">Code</th>
@@ -24,7 +24,7 @@ import { Popover } from 'primeng/popover';
                         <th class="w-1/6">Details</th>
                     </tr>
                 </ng-template>
-                <ng-template pTemplate="body" let-product>
+                <ng-template #body let-product>
                     <tr>
                         <td>{{ product.id }}</td>
                         <td>{{ product.code }}</td>
@@ -40,7 +40,7 @@ import { Popover } from 'primeng/popover';
                 </ng-template>
             </p-table>
             <p-popover #op (onHide)="selectedProduct = null">
-                <ng-template pTemplate="content">
+                <ng-template #content>
                     <div *ngIf="selectedProduct" class="rounded flex flex-col">
                         <div class="flex justify-center rounded">
                             <div class="relative mx-auto">
@@ -101,7 +101,7 @@ export class DataTableDoc implements OnInit {
     }
     code: Code = {
         basic: `<p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }" [paginator]="true" [rows]="5">
-    <ng-template pTemplate="header">
+    <ng-template #header>
         <tr>
             <th class="w-1/6">Id</th>
             <th class="w-1/6">Code</th>
@@ -111,7 +111,7 @@ export class DataTableDoc implements OnInit {
             <th class="w-1/6">Details</th>
         </tr>
     </ng-template>
-    <ng-template pTemplate="body" let-product>
+    <ng-template #body let-product>
         <tr>
             <td>{{ product.id }}</td>
             <td>{{ product.code }}</td>
@@ -131,7 +131,7 @@ export class DataTableDoc implements OnInit {
     </ng-template>
 </p-table>
 <p-popover #op (onHide)="selectedProduct = null">
-    <ng-template pTemplate="content">
+    <ng-template #content>
         <div *ngIf="selectedProduct" class="rounded flex flex-col">
             <div class="flex justify-center rounded">
                 <div class="relative mx-auto">
@@ -186,7 +186,7 @@ export class DataTableDoc implements OnInit {
 
         html: `<div class="card">
     <p-table [value]="products" [tableStyle]="{ 'min-width': '50rem' }" [paginator]="true" [rows]="5">
-        <ng-template pTemplate="header">
+        <ng-template #header>
             <tr>
                 <th class="w-1/6">Id</th>
                 <th class="w-1/6">Code</th>
@@ -196,7 +196,7 @@ export class DataTableDoc implements OnInit {
                 <th class="w-1/6">Details</th>
             </tr>
         </ng-template>
-        <ng-template pTemplate="body" let-product>
+        <ng-template #body let-product>
             <tr>
                 <td>{{ product.id }}</td>
                 <td>{{ product.code }}</td>
@@ -216,7 +216,7 @@ export class DataTableDoc implements OnInit {
         </ng-template>
     </p-table>
     <p-popover #op (onHide)="selectedProduct = null">
-        <ng-template pTemplate="content">
+        <ng-template #content>
             <div *ngIf="selectedProduct" class="rounded flex flex-col">
                 <div class="flex justify-center rounded">
                     <div class="relative mx-auto">