diff --git a/apps/showcase/doc/datepicker/datetemplatedoc.ts b/apps/showcase/doc/datepicker/datetemplatedoc.ts
index fab661a75c1..199e3551f19 100644
--- a/apps/showcase/doc/datepicker/datetemplatedoc.ts
+++ b/apps/showcase/doc/datepicker/datetemplatedoc.ts
@@ -10,7 +10,7 @@ import { Component } from '@angular/core';
         </app-docsectiontext>
         <div class="card flex justify-center">
             <p-datepicker [(ngModel)]="date">
-                <ng-template pTemplate="date" let-date>
+                <ng-template #date let-date>
                     <strong *ngIf="date.day > 10 && date.day < 15; else elseBlock" style="text-decoration: line-through">{{ date.day }}</strong>
                     <ng-template #elseBlock>{{ date.day }}</ng-template>
                 </ng-template>
@@ -24,7 +24,7 @@ export class DateTemplateDoc {
 
     code: Code = {
         basic: `<p-datepicker [(ngModel)]="date">
-    <ng-template pTemplate="date" let-date>
+    <ng-template #date let-date>
         <strong *ngIf="date.day > 10 && date.day < 15; else elseBlock" style="text-decoration: line-through">{{ date.day }}</strong>
         <ng-template #elseBlock>{{ date.day }}</ng-template>
     </ng-template>
@@ -32,7 +32,7 @@ export class DateTemplateDoc {
 
         html: `<div class="card flex justify-center">
    <p-datepicker [(ngModel)]="date">
-        <ng-template pTemplate="date" let-date>
+        <ng-template #date let-date>
             <strong *ngIf="date.day > 10 && date.day < 15; else elseBlock" style="text-decoration: line-through">{{ date.day }}</strong>
             <ng-template #elseBlock>{{ date.day }}</ng-template>
         </ng-template>
diff --git a/apps/showcase/doc/datepicker/icondoc.ts b/apps/showcase/doc/datepicker/icondoc.ts
index 08a90dbe945..e6bb007bd82 100644
--- a/apps/showcase/doc/datepicker/icondoc.ts
+++ b/apps/showcase/doc/datepicker/icondoc.ts
@@ -22,7 +22,7 @@ import { Component } from '@angular/core';
             <div class="flex-auto">
                 <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
                 <p-datepicker [(ngModel)]="date3" [iconDisplay]="'input'" [showIcon]="true" [timeOnly]="true" inputId="templatedisplay">
-                    <ng-template pTemplate="inputicon" let-clickCallBack="clickCallBack">
+                    <ng-template #inputicon let-clickCallBack="clickCallBack">
                         <i class="pi pi-clock" (click)="clickCallBack($event)"></i>
                     </ng-template>
                 </p-datepicker>
@@ -44,7 +44,7 @@ export class IconDoc {
 <p-datepicker [(ngModel)]="date2" [iconDisplay]="'input'" [showIcon]="true" inputId="icondisplay" />
 
 <p-datepicker [(ngModel)]="date3" [iconDisplay]="'input'" [showIcon]="true" [timeOnly]="true" inputId="templatedisplay">
-    <ng-template pTemplate="inputicon" let-clickCallBack="clickCallBack">
+    <ng-template #inputicon let-clickCallBack="clickCallBack">
         <i class="pi pi-clock" (click)="clickCallBack($event)"></i>
     </ng-template>
 </p-datepicker>`,
@@ -63,7 +63,7 @@ export class IconDoc {
     <div class="flex-auto">
         <label for="templatedisplay" class="font-bold block mb-2"> Custom Icon </label>
         <p-datepicker [(ngModel)]="date3" [iconDisplay]="'input'" [showIcon]="true" [timeOnly]="true" inputId="templatedisplay">
-            <ng-template pTemplate="inputicon" let-clickCallBack="clickCallBack">
+            <ng-template #inputicon let-clickCallBack="clickCallBack">
                 <i class="pi pi-clock" (click)="clickCallBack($event)"></i>
             </ng-template>
         </p-datepicker>