diff --git a/src/app/showcase/doc/rating/templatedoc.ts b/src/app/showcase/doc/rating/templatedoc.ts
index ba0f585e9dd..df2b93fc25a 100644
--- a/src/app/showcase/doc/rating/templatedoc.ts
+++ b/src/app/showcase/doc/rating/templatedoc.ts
@@ -9,7 +9,7 @@ import { Code } from '../../domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-rating [(ngModel)]="value" stars="5">
-                <ng-template pTemplate="cancel">
+                <ng-template pTemplate="cancelicon">
                     <img src="https://primefaces.org/cdn/primeng/images/demo/rating/cancel.png" width="25px" height="25px" />
                 </ng-template>
                 <ng-template pTemplate="onicon">
@@ -25,10 +25,8 @@ import { Code } from '../../domain/code';
 })
 export class TemplateDoc {
     value!: number;
-
-    code: Code = {
         basic: `<p-rating [(ngModel)]="value" stars="5">
-    <ng-template pTemplate="cancel">
+    <ng-template pTemplate="cancelicon">
         <img src="https://primefaces.org/cdn/primeng/images/demo/rating/cancel.png" width="25px" height="25px" />
     </ng-template>
     <ng-template pTemplate="onicon">
@@ -42,7 +40,7 @@ export class TemplateDoc {
         html: `
 <div class="card flex justify-content-center">
     <p-rating [(ngModel)]="value" stars="5">
-        <ng-template pTemplate="cancel">
+        <ng-template pTemplate="cancelicon">
             <img src="https://primefaces.org/cdn/primeng/images/demo/rating/cancel.png" width="25px" height="25px" />
         </ng-template>
         <ng-template pTemplate="onicon">