diff --git a/src/app/showcase/doc/accordion/controlleddoc.ts b/src/app/showcase/doc/accordion/controlleddoc.ts
index 23fed1e5605..45a4a4838ec 100644
--- a/src/app/showcase/doc/accordion/controlleddoc.ts
+++ b/src/app/showcase/doc/accordion/controlleddoc.ts
@@ -9,9 +9,9 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card">
             <div class="flex mb-3 gap-2 justify-content-end">
-                <p-button (click)="activeIndex = 0" rounded="true" label="1" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 0" />
-                <p-button (click)="activeIndex = 1" rounded="true" label="2" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 1" />
-                <p-button (click)="activeIndex = 2" rounded="true" label="3" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 2" />
+                <p-button (onClick)="activeIndex = 0" rounded="true" label="1" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 0" />
+                <p-button (onClick)="activeIndex = 1" rounded="true" label="2" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 1" />
+                <p-button (onClick)="activeIndex = 2" rounded="true" label="3" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 2" />
             </div>
             <p-accordion (activeIndexChange)="activeIndexChange($event)" [activeIndex]="activeIndex">
                 <p-accordionTab header="Header I">
diff --git a/src/app/showcase/doc/blockui/basicdoc.ts b/src/app/showcase/doc/blockui/basicdoc.ts
index a887e6d750b..4960b7840f0 100644
--- a/src/app/showcase/doc/blockui/basicdoc.ts
+++ b/src/app/showcase/doc/blockui/basicdoc.ts
@@ -8,8 +8,8 @@ import { Code } from '@domain/code';
             <p>The element to block should be placed as a child of BlockUI and <i>blocked</i> property is required to control the state.</p>
         </app-docsectiontext>
         <div class="card">
-            <p-button pRipple label="Block" (click)="blockedPanel = true" />
-            <p-button pRipple label="Unblock" (click)="blockedPanel = false" />
+            <p-button pRipple label="Block" (onClick)="blockedPanel = true" />
+            <p-button pRipple label="Unblock" (onClick)="blockedPanel = false" />
             <p-blockUI [target]="pnl" [blocked]="blockedPanel">
                 <i class="pi pi-lock" style="font-size: 3rem"></i>
             </p-blockUI>
@@ -27,8 +27,8 @@ export class BasicDoc {
     blockedPanel: boolean = false;
 
     code: Code = {
-        basic: `<p-button pRipple label="Block" (click)="blockedPanel = true" />
-<p-button pRipple label="Unblock" (click)="blockedPanel = false" />
+        basic: `<p-button pRipple label="Block" (onClick)="blockedPanel = true" />
+<p-button pRipple label="Unblock" (onClick)="blockedPanel = false" />
 <p-blockUI [target]="pnl" [blocked]="blockedPanel">
     <i class="pi pi-lock" style="font-size: 3rem"></i>
 </p-blockUI>
@@ -38,8 +38,8 @@ export class BasicDoc {
     </p>
 </p-panel>`,
         html: `<div class="card">
-    <p-button pRipple label="Block" (click)="blockedPanel = true" />
-    <p-button pRipple label="Unblock" (click)="blockedPanel = false" />
+    <p-button pRipple label="Block" (onClick)="blockedPanel = true" />
+    <p-button pRipple label="Unblock" (onClick)="blockedPanel = false" />
     <p-blockUI [target]="pnl" [blocked]="blockedPanel">
         <i class="pi pi-lock" style="font-size: 3rem"></i>
     </p-blockUI>
diff --git a/src/app/showcase/doc/blockui/documentdoc.ts b/src/app/showcase/doc/blockui/documentdoc.ts
index 6de2294f34c..1bff24a86c6 100644
--- a/src/app/showcase/doc/blockui/documentdoc.ts
+++ b/src/app/showcase/doc/blockui/documentdoc.ts
@@ -9,7 +9,7 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card">
             <p-blockUI [blocked]="blockedDocument" />
-            <p-button pRipple label="Block" (click)="blockDocument()" />
+            <p-button pRipple label="Block" (onClick)="blockDocument()" />
         </div>
         <app-code [code]="code" selector="block-ui-document-demo"></app-code>
     `
@@ -31,7 +31,7 @@ export class DocumentDoc {
         basic: `<p-blockUI [blocked]="blockedDocument" />`,
         html: `<div class="card">
     <p-blockUI [blocked]="blockedDocument" />
-    <p-button pRipple label="Block" (click)="blockDocument()" />
+    <p-button pRipple label="Block" (onClick)="blockDocument()" />
 </div>`,
         typescript: `import { Component, ChangeDetectorRef } from '@angular/core';
 import { BlockUIModule } from 'primeng/blockui';
diff --git a/src/app/showcase/doc/confirmdialog/accessibilitydoc.ts b/src/app/showcase/doc/confirmdialog/accessibilitydoc.ts
index 7883d13ad9b..564728499b9 100644
--- a/src/app/showcase/doc/confirmdialog/accessibilitydoc.ts
+++ b/src/app/showcase/doc/confirmdialog/accessibilitydoc.ts
@@ -83,7 +83,7 @@ this.confirmationService.confirm({
     reject: () => rejectFunc()
 });
 
-<p-button (click)="confirm1()" icon="pi pi-check" label="Confirm"></p-button>
+<p-button (onClick)="confirm1()" icon="pi pi-check" label="Confirm"></p-button>
 
 <p-confirmDialog></p-confirmDialog>
         `
diff --git a/src/app/showcase/doc/confirmdialog/basicdoc.ts b/src/app/showcase/doc/confirmdialog/basicdoc.ts
index 11136e20ed1..653ede91b19 100644
--- a/src/app/showcase/doc/confirmdialog/basicdoc.ts
+++ b/src/app/showcase/doc/confirmdialog/basicdoc.ts
@@ -11,8 +11,8 @@ import { Code } from '@domain/code';
         <div class="card flex justify-content-center gap-2">
             <p-toast />
             <p-confirmDialog />
-            <p-button (click)="confirm1($event)" label="Save" [outlined]="true" />
-            <p-button (click)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />
+            <p-button (onClick)="confirm1($event)" label="Save" [outlined]="true" />
+            <p-button (onClick)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />
         </div>
         <app-code [code]="code" selector="confirm-dialog-basic-demo"></app-code>
     `,
@@ -65,14 +65,14 @@ export class BasicDoc {
     code: Code = {
         basic: `<p-toast />
 <p-confirmDialog />
-<p-button (click)="confirm1($event)" label="Save" [outlined]="true" />
-<p-button (click)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />`,
+<p-button (onClick)="confirm1($event)" label="Save" [outlined]="true" />
+<p-button (onClick)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />`,
 
         html: `<div class="card flex justify-content-center gap-2">
     <p-toast />
     <p-confirmDialog />
-    <p-button (click)="confirm1($event)" label="Save" [outlined]="true" />
-    <p-button (click)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />
+    <p-button (onClick)="confirm1($event)" label="Save" [outlined]="true" />
+    <p-button (onClick)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />
 </div>`,
 
         typescript: `import { Component } from '@angular/core';
diff --git a/src/app/showcase/doc/confirmdialog/headlessdoc.ts b/src/app/showcase/doc/confirmdialog/headlessdoc.ts
index 13ad0f111cf..46db10b5438 100644
--- a/src/app/showcase/doc/confirmdialog/headlessdoc.ts
+++ b/src/app/showcase/doc/confirmdialog/headlessdoc.ts
@@ -25,7 +25,7 @@ import { Code } from '@domain/code';
                     </div>
                 </ng-template>
             </p-confirmDialog>
-            <p-button (click)="confirm()" icon="pi pi-check" label="Confirm" />
+            <p-button (onClick)="confirm()" icon="pi pi-check" label="Confirm" />
         </div>
         <app-code [code]="code" selector="confirm-dialog-headless-demo"></app-code>
     `,
@@ -79,7 +79,7 @@ export class HeadlessDoc {
         </div>
     </ng-template>
 </p-confirmDialog>
-<p-button (click)="confirm()" icon="pi pi-check" label="Confirm" />`,
+<p-button (onClick)="confirm()" icon="pi pi-check" label="Confirm" />`,
 
         html: `<div class="card flex justify-content-center">
 <p-toast />
@@ -110,7 +110,7 @@ export class HeadlessDoc {
         </div>
     </ng-template>
 </p-confirmDialog>
-<p-button (click)="confirm()" icon="pi pi-check" label="Confirm" />
+<p-button (onClick)="confirm()" icon="pi pi-check" label="Confirm" />
 </div>`,
 
         typescript: `import { Component } from '@angular/core';
diff --git a/src/app/showcase/doc/confirmdialog/positiondoc.ts b/src/app/showcase/doc/confirmdialog/positiondoc.ts
index cf7bb306ffc..09520037fc1 100644
--- a/src/app/showcase/doc/confirmdialog/positiondoc.ts
+++ b/src/app/showcase/doc/confirmdialog/positiondoc.ts
@@ -12,18 +12,18 @@ import { Code } from '@domain/code';
             <p-toast />
             <p-confirmDialog key="positionDialog" [position]="position" rejectButtonStyleClass="p-button-outlined" />
             <div class="flex flex-wrap justify-content-center gap-2">
-                <p-button (click)="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" />
-                <p-button (click)="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" />
+                <p-button (onClick)="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" />
+                <p-button (onClick)="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" />
             </div>
             <div class="flex flex-wrap justify-content-center gap-2">
-                <p-button (click)="confirmPosition('top-left')" icon="pi pi-arrow-down" label="TopLeft" severity="secondary" />
-                <p-button (click)="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" />
-                <p-button (click)="confirmPosition('top-right')" icon="pi pi-arrow-down" label="TopRight" severity="secondary" />
+                <p-button (onClick)="confirmPosition('top-left')" icon="pi pi-arrow-down" label="TopLeft" severity="secondary" />
+                <p-button (onClick)="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" />
+                <p-button (onClick)="confirmPosition('top-right')" icon="pi pi-arrow-down" label="TopRight" severity="secondary" />
             </div>
             <div class="flex flex-wrap justify-content-center gap-2">
-                <p-button (click)="confirmPosition('bottom-left')" icon="pi pi-arrow-up" label="BottomLeft" severity="secondary" />
-                <p-button (click)="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" />
-                <p-button (click)="confirmPosition('bottom-right')" icon="pi pi-arrow-up" label="BottomRight" severity="secondary" />
+                <p-button (onClick)="confirmPosition('bottom-left')" icon="pi pi-arrow-up" label="BottomLeft" severity="secondary" />
+                <p-button (onClick)="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" />
+                <p-button (onClick)="confirmPosition('bottom-right')" icon="pi pi-arrow-up" label="BottomRight" severity="secondary" />
             </div>
         </div>
         <app-code [code]="code" selector="confirm-dialog-position-demo"></app-code>
diff --git a/src/app/showcase/doc/confirmdialog/templatedoc.ts b/src/app/showcase/doc/confirmdialog/templatedoc.ts
index 7b2d6114cad..a3bbd9a7319 100644
--- a/src/app/showcase/doc/confirmdialog/templatedoc.ts
+++ b/src/app/showcase/doc/confirmdialog/templatedoc.ts
@@ -25,7 +25,7 @@ import { Code } from '@domain/code';
                     </div>
                 </ng-template>
             </p-confirmDialog>
-            <p-button (click)="confirm()" label="Save" />
+            <p-button (onClick)="confirm()" label="Save" />
         </div>
         <app-code [code]="code" selector="confirm-dialog-template-demo"></app-code>
     `,
@@ -64,7 +64,7 @@ export class TemplateDoc {
         </div>
     </ng-template>
 </p-confirmDialog>
-<p-button (click)="confirm()" label="Save" />`,
+<p-button (onClick)="confirm()" label="Save" />`,
 
         html: `<div class="card flex justify-content-center">
     <p-toast />
@@ -76,7 +76,7 @@ export class TemplateDoc {
             </div>
         </ng-template>
     </p-confirmDialog>
-    <p-button (click)="confirm()" label="Save" />
+    <p-button (onClick)="confirm()" label="Save" />
 </div>`,
 
         typescript: `import { Component } from '@angular/core';
diff --git a/src/app/showcase/doc/confirmpopup/basicdoc.ts b/src/app/showcase/doc/confirmpopup/basicdoc.ts
index 5cfd928d1e8..9ea2f447252 100644
--- a/src/app/showcase/doc/confirmpopup/basicdoc.ts
+++ b/src/app/showcase/doc/confirmpopup/basicdoc.ts
@@ -11,8 +11,8 @@ import { Code } from '@domain/code';
         <div class="card flex justify-content-center gap-2">
             <p-toast />
             <p-confirmPopup />
-            <p-button (click)="confirm1($event)" label="Save" [outlined]="true" />
-            <p-button (click)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />
+            <p-button (onClick)="confirm1($event)" label="Save" [outlined]="true" />
+            <p-button (onClick)="confirm2($event)" label="Delete" severity="danger" [outlined]="true" />
         </div>
         <app-code [code]="code" selector="confirm-popup-basic-demo"></app-code>
     `,
diff --git a/src/app/showcase/doc/confirmpopup/headlessdoc.ts b/src/app/showcase/doc/confirmpopup/headlessdoc.ts
index 0e699a378ec..586eb48ad31 100644
--- a/src/app/showcase/doc/confirmpopup/headlessdoc.ts
+++ b/src/app/showcase/doc/confirmpopup/headlessdoc.ts
@@ -15,13 +15,13 @@ import { ConfirmPopup } from 'primeng/confirmpopup';
                     <div class="border-round p-3">
                         <span>{{ message.message }}</span>
                         <div class="flex align-items-center gap-2 mt-3">
-                            <p-button (click)="accept()" label="Save" size="small" />
-                            <p-button (click)="reject()" label="Cancel" [outlined]="true" size="small" />
+                            <p-button (onClick)="accept()" label="Save" size="small" />
+                            <p-button (onClick)="reject()" label="Cancel" [outlined]="true" size="small" />
                         </div>
                     </div>
                 </ng-template>
             </p-confirmPopup>
-            <p-button (click)="confirm($event)" label="Save" />
+            <p-button (onClick)="confirm($event)" label="Save" />
         </div>
         <app-code [code]="code" selector="confirm-popup-headless-demo"></app-code>
     `,
@@ -63,13 +63,13 @@ export class HeadlessDoc {
             <div class="border-round p-3">
                 <span>{{ message.message }}</span>
                 <div class="flex align-items-center gap-2 mt-3">
-                    <p-button (click)="accept()" label="Save" size="small" />
-                    <p-button (click)="reject()" label="Cancel" [outlined]="true" size="small" />
+                    <p-button (onClick)="accept()" label="Save" size="small" />
+                    <p-button (onClick)="reject()" label="Cancel" [outlined]="true" size="small" />
                 </div>
             </div>
         </ng-template>
     </p-confirmPopup>
-<p-button (click)="confirm($event)" label="Save" />`,
+<p-button (onClick)="confirm($event)" label="Save" />`,
 
         html: `<div class="card flex justify-content-center gap-2">
     <p-toast />
@@ -78,13 +78,13 @@ export class HeadlessDoc {
             <div class="border-round p-3">
                 <span>{{ message.message }}</span>
                 <div class="flex align-items-center gap-2 mt-3">
-                    <p-button (click)="accept()" label="Save" size="small" />
-                    <p-button (click)="reject()" label="Cancel" [outlined]="true" size="small" />
+                    <p-button (onClick)="accept()" label="Save" size="small" />
+                    <p-button (onClick)="reject()" label="Cancel" [outlined]="true" size="small" />
                 </div>
             </div>
         </ng-template>
     </p-confirmPopup>
-<p-button (click)="confirm($event)" label="Save" />
+<p-button (onClick)="confirm($event)" label="Save" />
 </div>`,
 
         typescript: `import { Component, ViewChild } from '@angular/core';
diff --git a/src/app/showcase/doc/confirmpopup/templatedoc.ts b/src/app/showcase/doc/confirmpopup/templatedoc.ts
index ea13c58805e..9a9adcba825 100644
--- a/src/app/showcase/doc/confirmpopup/templatedoc.ts
+++ b/src/app/showcase/doc/confirmpopup/templatedoc.ts
@@ -18,7 +18,7 @@ import { Code } from '@domain/code';
                     </div>
                 </ng-template>
             </p-confirmPopup>
-            <p-button (click)="confirm($event)" label="Save" />
+            <p-button (onClick)="confirm($event)" label="Save" />
         </div>
         <app-code [code]="code" selector="confirm-popup-template-demo"></app-code>
     `,
@@ -60,7 +60,7 @@ export class TemplateDoc {
             </div>
         </ng-template>
     </p-confirmPopup>
-<p-button (click)="confirm($event)" label="Save" />`,
+<p-button (onClick)="confirm($event)" label="Save" />`,
 
         html: `<div class="card flex justify-content-center gap-2">
         <p-toast />
@@ -72,7 +72,7 @@ export class TemplateDoc {
                 </div>
             </ng-template>
         </p-confirmPopup>
-    <p-button (click)="confirm($event)" label="Save" />
+    <p-button (onClick)="confirm($event)" label="Save" />
 </div>`,
 
         typescript: `import { Component } from '@angular/core';
diff --git a/src/app/showcase/doc/dialog/basicdoc.ts b/src/app/showcase/doc/dialog/basicdoc.ts
index 356dac0301a..2a523bc836e 100644
--- a/src/app/showcase/doc/dialog/basicdoc.ts
+++ b/src/app/showcase/doc/dialog/basicdoc.ts
@@ -9,7 +9,7 @@ import { Code } from '@domain/code';
         >
 
         <div class="card flex justify-content-center">
-            <p-button (click)="showDialog()" label="Show" />
+            <p-button (onClick)="showDialog()" label="Show" />
             <p-dialog header="Edit Profile" [modal]="true" [(visible)]="visible" [style]="{ width: '25rem' }">
                 <span class="p-text-secondary block mb-5">Update your information.</span>
                 <div class="flex align-items-center gap-3 mb-3">
@@ -21,8 +21,8 @@ import { Code } from '@domain/code';
                     <input pInputText id="email" class="flex-auto" autocomplete="off" />
                 </div>
                 <div class="flex justify-content-end gap-2">
-                    <p-button label="Cancel" severity="secondary" (click)="visible = false" />
-                    <p-button label="Save" (click)="visible = false" />
+                    <p-button label="Cancel" severity="secondary" (onClick)="visible = false" />
+                    <p-button label="Save" (onClick)="visible = false" />
                 </div>
             </p-dialog>
         </div>
@@ -37,7 +37,7 @@ export class BasicDoc {
     }
 
     code: Code = {
-        basic: `<p-button (click)="showDialog()" label="Show" />
+        basic: `<p-button (onClick)="showDialog()" label="Show" />
 <p-dialog header="Edit Profile" [modal]="true" [(visible)]="visible" [style]="{ width: '25rem' }">
     <span class="p-text-secondary block mb-5">Update your information.</span>
     <div class="flex align-items-center gap-3 mb-3">
@@ -49,13 +49,13 @@ export class BasicDoc {
         <input pInputText id="email" class="flex-auto" autocomplete="off" />
     </div>
     <div class="flex justify-content-end gap-2">
-        <p-button label="Cancel" severity="secondary" (click)="visible = false" />
-        <p-button label="Save" (click)="visible = false" />
+        <p-button label="Cancel" severity="secondary" (onClick)="visible = false" />
+        <p-button label="Save" (onClick)="visible = false" />
     </div>
 </p-dialog>`,
 
         html: `<div class="card flex justify-content-center">
-    <p-button (click)="showDialog()" label="Show" />
+    <p-button (onClick)="showDialog()" label="Show" />
     <p-dialog header="Edit Profile" [modal]="true" [(visible)]="visible" [style]="{ width: '25rem' }">
         <span class="p-text-secondary block mb-5">Update your information.</span>
         <div class="flex align-items-center gap-3 mb-3">
@@ -67,8 +67,8 @@ export class BasicDoc {
             <input pInputText id="email" class="flex-auto" autocomplete="off" />
         </div>
         <div class="flex justify-content-end gap-2">
-            <p-button label="Cancel" severity="secondary" (click)="visible = false" />
-            <p-button label="Save" (click)="visible = false" />
+            <p-button label="Cancel" severity="secondary" (onClick)="visible = false" />
+            <p-button label="Save" (onClick)="visible = false" />
         </div>
     </p-dialog>
 </div>`,
diff --git a/src/app/showcase/doc/dialog/headlessdoc.ts b/src/app/showcase/doc/dialog/headlessdoc.ts
index 1811a95ece9..58de70721f2 100644
--- a/src/app/showcase/doc/dialog/headlessdoc.ts
+++ b/src/app/showcase/doc/dialog/headlessdoc.ts
@@ -8,7 +8,7 @@ import { Code } from '@domain/code';
             <p><i>Headless</i> mode allows you to customize the entire user interface instead of the default elements.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button (click)="showDialog()" icon="pi pi-user" label="Login" />
+            <p-button (onClick)="showDialog()" icon="pi pi-user" label="Login" />
             <p-dialog [modal]="true" [maskStyle]="'backdrop-filter: blur(2px)'" [(visible)]="visible">
                 <ng-template pTemplate="headless">
                     <div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
@@ -50,8 +50,8 @@ import { Code } from '@domain/code';
                             <input pInputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password" />
                         </div>
                         <div class="flex align-items-center gap-2">
-                            <p-button label="Sign-In" (click)="closeDialog()" [text]="true" styleClass="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full" />
-                            <p-button label="Cancel" (click)="closeDialog()" [text]="true" styleClass="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full" />
+                            <p-button label="Sign-In" (onClick)="closeDialog()" [text]="true" styleClass="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full" />
+                            <p-button label="Cancel" (onClick)="closeDialog()" [text]="true" styleClass="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full" />
                         </div>
                     </div>
                 </ng-template>
@@ -72,7 +72,7 @@ export class HeadlessDoc {
     }
 
     code: Code = {
-        basic: `<p-button (click)="showDialog()" icon="pi pi-user" label="Login" />
+        basic: `<p-button (onClick)="showDialog()" icon="pi pi-user" label="Login" />
 <p-dialog [(visible)]="visible">
     <ng-template pTemplate="headless">
         <div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
@@ -114,15 +114,15 @@ export class HeadlessDoc {
                 <input pInputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"/>
             </div>
             <div class="flex align-items-center gap-2">
-                <p-button label="Sign-In" (click)="closeDialog()" [text]="true" styleClass="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full"  />
-                <p-button label="Cancel" (click)="closeDialog()" [text]="true"  styleClass="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full" />
+                <p-button label="Sign-In" (onClick)="closeDialog()" [text]="true" styleClass="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full"  />
+                <p-button label="Cancel" (onClick)="closeDialog()" [text]="true"  styleClass="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full" />
             </div>
         </div>
     </ng-template>
 </p-dialog>`,
 
         html: `<div class="card flex justify-content-center">
-<p-button (click)="showDialog()" icon="pi pi-user" label="Login" />
+<p-button (onClick)="showDialog()" icon="pi pi-user" label="Login" />
 <p-dialog [(visible)]="visible">
     <ng-template pTemplate="headless">
         <div class="flex flex-column px-8 py-5 gap-4" style="border-radius: 12px; background-image: radial-gradient(circle at left top, var(--primary-400), var(--primary-700))">
@@ -164,8 +164,8 @@ export class HeadlessDoc {
                 <input pInputText id="password" class="bg-white-alpha-20 border-none p-3 text-primary-50" type="password"/>
             </div>
             <div class="flex align-items-center gap-2">
-                <p-button label="Sign-In" (click)="closeDialog()" [text]="true" styleClass="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full"  />
-                <p-button label="Cancel" (click)="closeDialog()" [text]="true"  styleClass="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full" />
+                <p-button label="Sign-In" (onClick)="closeDialog()" [text]="true" styleClass="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full"  />
+                <p-button label="Cancel" (onClick)="closeDialog()" [text]="true"  styleClass="p-3 w-full text-primary-50 border-1 border-white-alpha-30 hover:bg-white-alpha-10" class="w-full" />
             </div>
         </div>
     </ng-template>
diff --git a/src/app/showcase/doc/dialog/longcontentdoc.ts b/src/app/showcase/doc/dialog/longcontentdoc.ts
index d2826526828..00acaffea08 100644
--- a/src/app/showcase/doc/dialog/longcontentdoc.ts
+++ b/src/app/showcase/doc/dialog/longcontentdoc.ts
@@ -8,7 +8,7 @@ import { Code } from '@domain/code';
             <p>Dialog automatically displays a scroller when content exceeeds viewport.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button (click)="showDialog()" label="Show" />
+            <p-button (onClick)="showDialog()" label="Show" />
             <p-dialog header="Header" [modal]="true" [(visible)]="visible" [style]="{ width: '50rem' }" [breakpoints]="{ '1199px': '75vw', '575px': '90vw' }">
                 <p class="mb-5">
                     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
@@ -55,7 +55,7 @@ export class LongContentDoc {
     }
 
     code: Code = {
-        basic: `<p-button (click)="showDialog()" label="Show" />
+        basic: `<p-button (onClick)="showDialog()" label="Show" />
 <p-dialog 
     header="Header" 
     [modal]="true"
@@ -83,7 +83,7 @@ export class LongContentDoc {
 </p-dialog>`,
 
         html: `<div class="card flex justify-content-center">
-    <p-button (click)="showDialog()" label="Show" />
+    <p-button (onClick)="showDialog()" label="Show" />
     <p-dialog 
         header="Header" 
         [modal]="true"
diff --git a/src/app/showcase/doc/dialog/maximizabledoc.ts b/src/app/showcase/doc/dialog/maximizabledoc.ts
index 0eebbdd8d77..d64fb31201d 100644
--- a/src/app/showcase/doc/dialog/maximizabledoc.ts
+++ b/src/app/showcase/doc/dialog/maximizabledoc.ts
@@ -8,7 +8,7 @@ import { Code } from '@domain/code';
             <p>Setting <i>maximizable</i> property to <i>true</i> enables the full screen mode.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button (click)="showDialog()" label="Show" />
+            <p-button (onClick)="showDialog()" label="Show" />
             <p-dialog header="Header" [modal]="true" [(visible)]="visible" [style]="{ width: '50rem' }" [breakpoints]="{ '1199px': '75vw', '575px': '90vw' }" [maximizable]="true">
                 <p>
                     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
@@ -27,7 +27,7 @@ export class MaximizableDoc {
     }
 
     code: Code = {
-        basic: `<p-button (click)="showDialog()" label="Show" />
+        basic: `<p-button (onClick)="showDialog()" label="Show" />
 <p-dialog 
     header="Header" 
     [modal]="true"
@@ -41,7 +41,7 @@ export class MaximizableDoc {
 </p-dialog>`,
 
         html: `<div class="card flex justify-content-center">
-    <p-button (click)="showDialog()" label="Show" />
+    <p-button (onClick)="showDialog()" label="Show" />
     <p-dialog 
         header="Header" 
         [modal]="true" 
diff --git a/src/app/showcase/doc/dialog/modaldoc.ts b/src/app/showcase/doc/dialog/modaldoc.ts
index d581eabc23e..9c108e68056 100644
--- a/src/app/showcase/doc/dialog/modaldoc.ts
+++ b/src/app/showcase/doc/dialog/modaldoc.ts
@@ -8,7 +8,7 @@ import { Code } from '@domain/code';
             <p>Mask layer behind the Dialog can be turned on by setting the <i>modal</i> property to <i>true</i>.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
+            <p-button (onClick)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
             <p-dialog header="Header" [(visible)]="visible" [modal]="true" [style]="{ width: '50vw' }" [draggable]="false" [resizable]="false">
                 <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
@@ -27,7 +27,7 @@ export class ModalDoc {
     }
 
     code: Code = {
-        basic: `<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
+        basic: `<p-button (onClick)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
 <p-dialog header="Header" [(visible)]="visible" [modal]="true" [style]="{ width: '50vw' }" [draggable]="false" [resizable]="false">
     <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
@@ -37,7 +37,7 @@ export class ModalDoc {
 
         html: `
 <div class="card flex justify-content-center">
-    <p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
+    <p-button (onClick)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
     <p-dialog header="Header" [(visible)]="visible" [modal]="true" [style]="{ width: '50vw' }" [draggable]="false" [resizable]="false">
         <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
diff --git a/src/app/showcase/doc/dialog/overlaysinsidedoc.ts b/src/app/showcase/doc/dialog/overlaysinsidedoc.ts
index 9759a23585b..1b33c1a3cbd 100644
--- a/src/app/showcase/doc/dialog/overlaysinsidedoc.ts
+++ b/src/app/showcase/doc/dialog/overlaysinsidedoc.ts
@@ -16,7 +16,7 @@ interface City {
             </p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
+            <p-button (onClick)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
             <p-dialog header="Header" [(visible)]="visible" [style]="{ width: '50vw' }">
                 <div class="flex py-2 justify-content-center">
                     <p-dropdown appendTo="body" [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name"></p-dropdown>
@@ -48,7 +48,7 @@ export class OverlaysInsideDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `<p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
+        basic: `<p-button (onClick)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
 <p-dialog header="Header" [(visible)]="visible" [style]="{ width: '50vw' }">
     <div class="flex py-2 justify-content-center">
         <p-dropdown appendTo="body" [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name"></p-dropdown>
@@ -57,7 +57,7 @@ export class OverlaysInsideDoc implements OnInit {
 
         html: `
 <div class="card flex justify-content-center">
-    <p-button (click)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
+    <p-button (onClick)="showDialog()" icon="pi pi-external-link" label="Show"></p-button>
     <p-dialog header="Header" [(visible)]="visible" [style]="{ width: '50vw' }">
         <div class="flex py-2 justify-content-center">
             <p-dropdown appendTo="body" [options]="cities" [(ngModel)]="selectedCity" placeholder="Select a City" optionLabel="name"></p-dropdown>
diff --git a/src/app/showcase/doc/dialog/positiondoc.ts b/src/app/showcase/doc/dialog/positiondoc.ts
index 3564dba290f..6a4c833aaf1 100644
--- a/src/app/showcase/doc/dialog/positiondoc.ts
+++ b/src/app/showcase/doc/dialog/positiondoc.ts
@@ -9,18 +9,18 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex flex-column align-items-center gap-2">
             <div class="flex flex-wrap gap-2">
-                <p-button (click)="showDialog('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" />
-                <p-button (click)="showDialog('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" />
+                <p-button (onClick)="showDialog('left')" icon="pi pi-arrow-right" label="Left" severity="secondary" />
+                <p-button (onClick)="showDialog('right')" icon="pi pi-arrow-left" label="Right" severity="secondary" />
             </div>
             <div class="flex flex-wrap gap-2">
-                <p-button (click)="showDialog('top-left')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" />
-                <p-button (click)="showDialog('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" />
-                <p-button (click)="showDialog('top-right')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" />
+                <p-button (onClick)="showDialog('top-left')" icon="pi pi-arrow-down-right" label="TopLeft" severity="secondary" />
+                <p-button (onClick)="showDialog('top')" icon="pi pi-arrow-down" label="Top" severity="secondary" />
+                <p-button (onClick)="showDialog('top-right')" icon="pi pi-arrow-down-left" label="TopRight" severity="secondary" />
             </div>
             <div class="flex flex-wrap gap-2">
-                <p-button (click)="showDialog('bottom-left')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" />
-                <p-button (click)="showDialog('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" />
-                <p-button (click)="showDialog('bottom-right')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" />
+                <p-button (onClick)="showDialog('bottom-left')" icon="pi pi-arrow-up-right" label="BottomLeft" severity="secondary" />
+                <p-button (onClick)="showDialog('bottom')" icon="pi pi-arrow-up" label="Bottom" severity="secondary" />
+                <p-button (onClick)="showDialog('bottom-right')" icon="pi pi-arrow-up-left" label="BottomRight" severity="secondary" />
             </div>
             <p-dialog header="Edit Profile" [modal]="true" [(visible)]="visible" [position]="position" [style]="{ width: '25rem' }">
                 <span class="p-text-secondary block mb-5">Update your information.</span>
@@ -33,8 +33,8 @@ import { Code } from '@domain/code';
                     <input pInputText id="email" class="flex-auto" autocomplete="off" />
                 </div>
                 <div class="flex justify-content-end gap-2">
-                    <p-button label="Cancel" severity="secondary" (click)="visible = false" />
-                    <p-button label="Save" (click)="visible = false" />
+                    <p-button label="Cancel" severity="secondary" (onClick)="visible = false" />
+                    <p-button label="Save" (onClick)="visible = false" />
                 </div>
             </p-dialog>
         </div>
@@ -54,46 +54,46 @@ export class PositionDoc {
     code: Code = {
         basic: `<div class="flex flex-wrap gap-2">
     <p-button 
-        (click)="showDialog('left')" 
+        (onClick)="showDialog('left')" 
         icon="pi pi-arrow-right" 
         label="Left" 
         severity="secondary" />
     <p-button 
-        (click)="showDialog('right')" 
+        (onClick)="showDialog('right')" 
         icon="pi pi-arrow-left" 
         label="Right" 
         severity="secondary" />
 </div>
 <div class="flex flex-wrap gap-2">
     <p-button 
-        (click)="showDialog('top-left')" 
+        (onClick)="showDialog('top-left')" 
         icon="pi pi-arrow-down-right" 
         label="TopLeft" 
         severity="secondary" />
     <p-button 
-        (click)="showDialog('top')"
+        (onClick)="showDialog('top')"
         icon="pi pi-arrow-down" 
         label="Top" 
         severity="secondary" />
     <p-button 
-        (click)="showDialog('top-right')" 
+        (onClick)="showDialog('top-right')" 
         icon="pi pi-arrow-down-left" 
         label="TopRight" 
         severity="secondary" />
 </div>
 <div class="flex flex-wrap gap-2">
     <p-button 
-        (click)="showDialog('bottom-left')" 
+        (onClick)="showDialog('bottom-left')" 
         icon="pi pi-arrow-up-right" 
         label="BottomLeft" 
         severity="secondary" />
     <p-button 
-        (click)="showDialog('bottom')" 
+        (onClick)="showDialog('bottom')" 
         icon="pi pi-arrow-up" 
         label="Bottom" 
         severity="secondary" />
     <p-button 
-        (click)="showDialog('bottom-right')" 
+        (onClick)="showDialog('bottom-right')" 
         icon="pi pi-arrow-up-left" 
         label="BottomRight" 
         severity="secondary" />
@@ -120,54 +120,54 @@ export class PositionDoc {
             <input pInputText id="email" class="flex-auto" autocomplete="off" />
         </div>
         <div class="flex justify-content-end gap-2">
-            <p-button label="Cancel" severity="secondary" (click)="visible = false" />
-            <p-button label="Save" (click)="visible = false" />
+            <p-button label="Cancel" severity="secondary" (onClick)="visible = false" />
+            <p-button label="Save" (onClick)="visible = false" />
         </div>
 </p-dialog>`,
 
         html: `<div class="card flex flex-column align-items-center gap-2">
     <div class="flex flex-wrap gap-2">
         <p-button 
-            (click)="showDialog('left')" 
+            (onClick)="showDialog('left')" 
             icon="pi pi-arrow-right" 
             label="Left" 
             severity="secondary" />
         <p-button 
-            (click)="showDialog('right')" 
+            (onClick)="showDialog('right')" 
             icon="pi pi-arrow-left" 
             label="Right" 
             severity="secondary" />
     </div>
     <div class="flex flex-wrap gap-2">
         <p-button 
-            (click)="showDialog('top-left')" 
+            (onClick)="showDialog('top-left')" 
             icon="pi pi-arrow-down-right" 
             label="TopLeft" 
             severity="secondary" />
         <p-button 
-            (click)="showDialog('top')" 
+            (onClick)="showDialog('top')" 
             icon="pi pi-arrow-down" 
             label="Top" 
             severity="secondary" />
         <p-button 
-            (click)="showDialog('top-right')" 
+            (onClick)="showDialog('top-right')" 
             icon="pi pi-arrow-down-left" 
             label="TopRight" 
             severity="secondary" />
     </div>
     <div class="flex flex-wrap gap-2">
         <p-button 
-            (click)="showDialog('bottom-left')" 
+            (onClick)="showDialog('bottom-left')" 
             icon="pi pi-arrow-up-right" 
             label="BottomLeft" 
             severity="secondary" />
         <p-button 
-            (click)="showDialog('bottom')" 
+            (onClick)="showDialog('bottom')" 
             icon="pi pi-arrow-up" 
             label="Bottom" 
             severity="secondary" />
         <p-button 
-            (click)="showDialog('bottom-right')" 
+            (onClick)="showDialog('bottom-right')" 
             icon="pi pi-arrow-up-left" 
             label="BottomRight" 
             severity="secondary" />
@@ -194,8 +194,8 @@ export class PositionDoc {
                 <input pInputText id="email" class="flex-auto" autocomplete="off" />
             </div>
             <div class="flex justify-content-end gap-2">
-                <p-button label="Cancel" severity="secondary" (click)="visible = false" />
-                <p-button label="Save" (click)="visible = false" />
+                <p-button label="Cancel" severity="secondary" (onClick)="visible = false" />
+                <p-button label="Save" (onClick)="visible = false" />
             </div>
     </p-dialog>
 </div>`,
diff --git a/src/app/showcase/doc/dialog/responsivedoc.ts b/src/app/showcase/doc/dialog/responsivedoc.ts
index 03f3ada34d2..b85e2506c2f 100644
--- a/src/app/showcase/doc/dialog/responsivedoc.ts
+++ b/src/app/showcase/doc/dialog/responsivedoc.ts
@@ -11,7 +11,7 @@ import { Code } from '@domain/code';
             </p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button (click)="showDialog()" label="Show" />
+            <p-button (onClick)="showDialog()" label="Show" />
             <p-dialog header="Header" [(visible)]="visible" [modal]="true" [breakpoints]="{ '1199px': '75vw', '575px': '90vw' }" [style]="{ width: '50vw' }" [draggable]="false" [resizable]="false">
                 <p>
                     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
@@ -30,7 +30,7 @@ export class ResponsiveDoc {
     }
 
     code: Code = {
-        basic: `<p-button (click)="showDialog()" label="Show" />
+        basic: `<p-button (onClick)="showDialog()" label="Show" />
 <p-dialog 
     header="Header" 
     [(visible)]="visible" 
@@ -45,7 +45,7 @@ export class ResponsiveDoc {
 </p-dialog>`,
 
         html: `<div class="card flex justify-content-center">
-    <p-button (click)="showDialog()" label="Show" />
+    <p-button (onClick)="showDialog()" label="Show" />
     <p-dialog 
         header="Header" 
         [(visible)]="visible" 
diff --git a/src/app/showcase/doc/dialog/templatedoc.ts b/src/app/showcase/doc/dialog/templatedoc.ts
index ceb7fab32f1..cb940795054 100644
--- a/src/app/showcase/doc/dialog/templatedoc.ts
+++ b/src/app/showcase/doc/dialog/templatedoc.ts
@@ -8,7 +8,7 @@ import { Code } from '@domain/code';
             <p>Dialog can be customized using <i>header</i> and <i>footer</i> templates.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button (click)="showDialog()" label="Show" />
+            <p-button (onClick)="showDialog()" label="Show" />
             <p-dialog header="Header" [(visible)]="visible" [modal]="true" [style]="{ width: '25rem' }">
                 <ng-template pTemplate="header">
                     <div class="inline-flex align-items-center justify-content-center gap-2">
@@ -26,8 +26,8 @@ import { Code } from '@domain/code';
                     <input pInputText id="email" class="flex-auto" autocomplete="off" />
                 </div>
                 <ng-template pTemplate="footer">
-                    <p-button label="Cancel" [text]="true" severity="secondary" (click)="visible = false" />
-                    <p-button label="Save" [outlined]="true" severity="secondary" (click)="visible = false" />
+                    <p-button label="Cancel" [text]="true" severity="secondary" (onClick)="visible = false" />
+                    <p-button label="Save" [outlined]="true" severity="secondary" (onClick)="visible = false" />
                 </ng-template>
             </p-dialog>
         </div>
@@ -42,7 +42,7 @@ export class TemplateDoc {
     }
 
     code: Code = {
-        basic: `<p-button (click)="showDialog()" label="Show" />
+        basic: `<p-button (onClick)="showDialog()" label="Show" />
 <p-dialog 
     header="Header" 
     [(visible)]="visible" 
@@ -74,18 +74,18 @@ export class TemplateDoc {
                 label="Cancel" 
                 [text]="true" 
                 severity="secondary" 
-                (click)="visible = false" />
+                (onClick)="visible = false" />
             <p-button 
                 label="Save" 
                 [outlined]="true" 
                 severity="secondary" 
-                (click)="visible = false" 
+                (onClick)="visible = false" 
               />
         </ng-template>
 </p-dialog>`,
 
         html: `<div class="card flex justify-content-center">
-    <p-button (click)="showDialog()" label="Show" />
+    <p-button (onClick)="showDialog()" label="Show" />
     <p-dialog 
         header="Header" 
         [(visible)]="visible" 
@@ -117,12 +117,12 @@ export class TemplateDoc {
                     label="Cancel" 
                     [text]="true" 
                     severity="secondary" 
-                    (click)="visible = false" />
+                    (onClick)="visible = false" />
                 <p-button 
                     label="Save" 
                     [outlined]="true" 
                     severity="secondary" 
-                    (click)="visible = false" 
+                    (onClick)="visible = false" 
                   />
             </ng-template>
     </p-dialog>
diff --git a/src/app/showcase/doc/dialog/withoutmodaldoc.ts b/src/app/showcase/doc/dialog/withoutmodaldoc.ts
index 3170616ac16..662982e432f 100644
--- a/src/app/showcase/doc/dialog/withoutmodaldoc.ts
+++ b/src/app/showcase/doc/dialog/withoutmodaldoc.ts
@@ -8,7 +8,7 @@ import { Code } from '@domain/code';
             <p>Mask layer behind the Dialog is configured with the <i>modal</i> property. By default, no modal layer is added.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button (click)="showDialog()" label="Show" />
+            <p-button (onClick)="showDialog()" label="Show" />
             <p-dialog header="Edit Profile" [(visible)]="visible" [style]="{ width: '25rem' }">
                 <span class="p-text-secondary block mb-5">Update your information.</span>
                 <div class="flex align-items-center gap-3 mb-3">
@@ -20,8 +20,8 @@ import { Code } from '@domain/code';
                     <input pInputText id="email" class="flex-auto" autocomplete="off" />
                 </div>
                 <div class="flex justify-content-end gap-2">
-                    <p-button label="Cancel" severity="secondary" (click)="visible = false" />
-                    <p-button label="Save" (click)="visible = false" />
+                    <p-button label="Cancel" severity="secondary" (onClick)="visible = false" />
+                    <p-button label="Save" (onClick)="visible = false" />
                 </div>
             </p-dialog>
         </div>
@@ -36,7 +36,7 @@ export class WithoutModalDoc {
     }
 
     code: Code = {
-        basic: `<p-button (click)="showDialog()" label="Show" />
+        basic: `<p-button (onClick)="showDialog()" label="Show" />
 <p-dialog header="Edit Profile" [(visible)]="visible" [style]="{ width: '25rem' }">
     <span class="p-text-secondary block mb-5">Update your information.</span>
     <div class="flex align-items-center gap-3 mb-3">
@@ -48,13 +48,13 @@ export class WithoutModalDoc {
         <input pInputText id="email" class="flex-auto" autocomplete="off" />
     </div>
     <div class="flex justify-content-end gap-2">
-        <p-button label="Cancel" severity="secondary" (click)="visible = false" />
-        <p-button label="Save" (click)="visible = false" />
+        <p-button label="Cancel" severity="secondary" (onClick)="visible = false" />
+        <p-button label="Save" (onClick)="visible = false" />
     </div>
 </p-dialog>`,
 
         html: `<div class="card flex justify-content-center">
-    <p-button (click)="showDialog()" label="Show" />
+    <p-button (onClick)="showDialog()" label="Show" />
     <p-dialog header="Edit Profile" [(visible)]="visible" [style]="{ width: '25rem' }">
         <span class="p-text-secondary block mb-5">Update your information.</span>
         <div class="flex align-items-center gap-3 mb-3">
@@ -66,8 +66,8 @@ export class WithoutModalDoc {
             <input pInputText id="email" class="flex-auto" autocomplete="off" />
         </div>
         <div class="flex justify-content-end gap-2">
-            <p-button label="Cancel" severity="secondary" (click)="visible = false" />
-            <p-button label="Save" (click)="visible = false" />
+            <p-button label="Cancel" severity="secondary" (onClick)="visible = false" />
+            <p-button label="Save" (onClick)="visible = false" />
         </div>
     </p-dialog>
 </div>`,
diff --git a/src/app/showcase/doc/dynamicdialog/exampledoc.ts b/src/app/showcase/doc/dynamicdialog/exampledoc.ts
index 3d99288fa42..4dbab7e72e0 100644
--- a/src/app/showcase/doc/dynamicdialog/exampledoc.ts
+++ b/src/app/showcase/doc/dynamicdialog/exampledoc.ts
@@ -16,7 +16,7 @@ import { Footer } from './footer';
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-toast />
-            <p-button (click)="show()" icon="pi pi-search" label="Select a Product" />
+            <p-button (onClick)="show()" icon="pi pi-search" label="Select a Product" />
         </div>
         <app-code [code]="code" selector="dynamic-dialog-example-demo" [extFiles]="extFiles" [routeFiles]="routeFiles"></app-code>
     `,
@@ -68,11 +68,11 @@ export class ExampleDoc implements OnDestroy {
 
     code: Code = {
         basic: `<p-toast />
-<p-button (click)="show()" icon="pi pi-search" label="Select a Product" />`,
+<p-button (onClick)="show()" icon="pi pi-search" label="Select a Product" />`,
 
         html: `<div class="card flex justify-content-center">
     <p-toast />
-    <p-button (click)="show()" icon="pi pi-search" label="Select a Product" />
+    <p-button (onClick)="show()" icon="pi pi-search" label="Select a Product" />
 </div>`,
 
         typescript: `import { Component, OnDestroy } from '@angular/core';
@@ -173,7 +173,7 @@ import { ButtonModule } from 'primeng/button';
     standalone:true,
     imports:[TableModule, ButtonModule],
     template: \`<div class="flex justify-content-end mt-1 mb-3">
-            <p-button icon="pi pi-external-link" label="Nested Dialog" [outlined]="true" severity="success" (click)="showInfo()" />
+            <p-button icon="pi pi-external-link" label="Nested Dialog" [outlined]="true" severity="success" (onClick)="showInfo()" />
         </div>
         <p-table [value]="products" responsiveLayout="scroll" [rows]="5" [responsive]="true">
             <ng-template pTemplate="header">
@@ -196,7 +196,7 @@ import { ButtonModule } from 'primeng/button';
                         {{ product.quantity }}
                     </td>
                     <td>
-                        <p-button type="button" [text]="true" [rounded]="true" icon="pi pi-plus" (click)="selectProduct(product)" />
+                        <p-button type="button" [text]="true" [rounded]="true" icon="pi pi-plus" (onClick)="selectProduct(product)" />
                     </td>
                 </tr>
             </ng-template>
@@ -259,7 +259,7 @@ import { ButtonModule } from 'primeng/button';
         There are <strong>{{ totalProducts }}</strong> products in total in this list.
     </p>
     <div class="flex justify-content-end">
-        <p-button type="button" label="Close" (click)="close()" />
+        <p-button type="button" label="Close" (onClick)="close()" />
     </div>
 </div>\`
 })
@@ -302,7 +302,7 @@ import { ButtonModule } from 'primeng/button';
     imports: [ButtonModule],
     template:  \`
         <div class="flex w-full justify-content-end mt-3">
-            <p-button type="button" label="Cancel" icon="pi pi-times" (click)="closeDialog({ buttonType: 'Cancel', summary: 'No Product Selected' })" />
+            <p-button type="button" label="Cancel" icon="pi pi-times" (onClick)="closeDialog({ buttonType: 'Cancel', summary: 'No Product Selected' })" />
         </div> \`
 })
 export class Footer {
diff --git a/src/app/showcase/doc/dynamicdialog/footer.ts b/src/app/showcase/doc/dynamicdialog/footer.ts
index f6c5f872c2e..18fc9fe5b33 100644
--- a/src/app/showcase/doc/dynamicdialog/footer.ts
+++ b/src/app/showcase/doc/dynamicdialog/footer.ts
@@ -5,7 +5,7 @@ import { DynamicDialogRef } from 'primeng/dynamicdialog';
     selector: 'footer',
     template: `
         <div class="flex w-full justify-content-end mt-3">
-            <p-button type="button" label="Cancel" icon="pi pi-times" (click)="closeDialog({ buttonType: 'Cancel', summary: 'No Product Selected' })"></p-button>
+            <p-button type="button" label="Cancel" icon="pi pi-times" (onClick)="closeDialog({ buttonType: 'Cancel', summary: 'No Product Selected' })"></p-button>
         </div>
     `
 })
diff --git a/src/app/showcase/doc/dynamicdialog/infodemo.ts b/src/app/showcase/doc/dynamicdialog/infodemo.ts
index c01841b293a..040d4145cf7 100644
--- a/src/app/showcase/doc/dynamicdialog/infodemo.ts
+++ b/src/app/showcase/doc/dynamicdialog/infodemo.ts
@@ -8,7 +8,7 @@ import { DialogService, DynamicDialogComponent, DynamicDialogRef } from 'primeng
                 There are <strong>{{ totalProducts }}</strong> products in total in this list.
             </p>
             <div class="flex justify-content-end">
-                <p-button type="button" label="Close" (click)="close()"></p-button>
+                <p-button type="button" label="Close" (onClick)="close()"></p-button>
             </div>
         </div>
     `
diff --git a/src/app/showcase/doc/dynamicdialog/productlistdemo.ts b/src/app/showcase/doc/dynamicdialog/productlistdemo.ts
index 501fab8aa4c..50b5033be57 100755
--- a/src/app/showcase/doc/dynamicdialog/productlistdemo.ts
+++ b/src/app/showcase/doc/dynamicdialog/productlistdemo.ts
@@ -5,7 +5,7 @@ import { ProductService } from '@service/productservice';
 import { InfoDemo } from './infodemo';
 @Component({
     template: ` <div class="flex justify-content-end mt-1 mb-3">
-            <p-button icon="pi pi-external-link" label="Nested Dialog" [outlined]="true" severity="success" (click)="showInfo()" />
+            <p-button icon="pi pi-external-link" label="Nested Dialog" [outlined]="true" severity="success" (onClick)="showInfo()" />
         </div>
         <p-table [value]="products" responsiveLayout="scroll" [rows]="5" [responsive]="true">
             <ng-template pTemplate="header">
@@ -28,7 +28,7 @@ import { InfoDemo } from './infodemo';
                         {{ product.quantity }}
                     </td>
                     <td>
-                        <p-button type="button" [text]="true" [rounded]="true" icon="pi pi-plus" (click)="selectProduct(product)"></p-button>
+                        <p-button type="button" [text]="true" [rounded]="true" icon="pi pi-plus" (onClick)="selectProduct(product)"></p-button>
                     </td>
                 </tr>
             </ng-template>
diff --git a/src/app/showcase/doc/fileupload/templatedoc.ts b/src/app/showcase/doc/fileupload/templatedoc.ts
index 4f85f3a7559..381e8c30c3b 100644
--- a/src/app/showcase/doc/fileupload/templatedoc.ts
+++ b/src/app/showcase/doc/fileupload/templatedoc.ts
@@ -38,7 +38,7 @@ import { MessageService, PrimeNGConfig } from 'primeng/api';
                                 <span class="font-semibold">{{ file.name }}</span>
                                 <div>{{ formatSize(file.size) }}</div>
                                 <p-badge value="Pending" severity="warning" />
-                                <p-button icon="pi pi-times" (click)="onRemoveTemplatingFile($event, file, removeFileCallback, index)" [outlined]="true" [rounded]="true" severity="danger" />
+                                <p-button icon="pi pi-times" (onClick)="onRemoveTemplatingFile($event, file, removeFileCallback, index)" [outlined]="true" [rounded]="true" severity="danger" />
                             </div>
                         </div>
                     </div>
@@ -154,7 +154,7 @@ export class TemplateDoc {
                     <span class="font-semibold">{{ file.name }}</span>
                     <div>{{ formatSize(file.size) }}</div>
                     <p-badge value="Pending" severity="warning" />
-                    <p-button icon="pi pi-times" (click)="onRemoveTemplatingFile($event, file, removeFileCallback, index)" [outlined]="true" [rounded]="true" severity="danger" />
+                    <p-button icon="pi pi-times" (onClick)="onRemoveTemplatingFile($event, file, removeFileCallback, index)" [outlined]="true" [rounded]="true" severity="danger" />
                 </div>
             </div>
         </div>
@@ -207,7 +207,7 @@ export class TemplateDoc {
                         <span class="font-semibold">{{ file.name }}</span>
                         <div>{{ formatSize(file.size) }}</div>
                         <p-badge value="Pending" severity="warning" />
-                        <p-button icon="pi pi-times" (click)="onRemoveTemplatingFile($event, file, removeFileCallback, index)" [outlined]="true" [rounded]="true" severity="danger" />
+                        <p-button icon="pi pi-times" (onClick)="onRemoveTemplatingFile($event, file, removeFileCallback, index)" [outlined]="true" [rounded]="true" severity="danger" />
                     </div>
                 </div>
             </div>
diff --git a/src/app/showcase/doc/galleria/controlleddoc.ts b/src/app/showcase/doc/galleria/controlleddoc.ts
index 88195c5141a..8e99400e02f 100644
--- a/src/app/showcase/doc/galleria/controlleddoc.ts
+++ b/src/app/showcase/doc/galleria/controlleddoc.ts
@@ -10,8 +10,8 @@ import { PhotoService } from '@service/photoservice';
         </app-docsectiontext>
         <div class="card">
             <div class="py-2">
-                <p-button type="button" icon="pi pi-minus" (click)="prev()" severity="secondary" styleClass="mr-2" />
-                <p-button type="button" icon="pi pi-plus" (click)="next()" />
+                <p-button type="button" icon="pi pi-minus" (onClick)="prev()" severity="secondary" styleClass="mr-2" />
+                <p-button type="button" icon="pi pi-plus" (onClick)="next()" />
             </div>
             <p-galleria [(value)]="images" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '640px' }" [numVisible]="5" [(activeIndex)]="activeIndex">
                 <ng-template pTemplate="item" let-item>
@@ -76,13 +76,13 @@ export class ControlledDoc implements OnInit {
     <p-button 
         type="button" 
         icon="pi pi-minus" 
-        (click)="prev()" 
+        (onClick)="prev()" 
         severity="secondary" 
         styleClass="mr-2" />
     <p-button 
         type="button" 
         icon="pi pi-plus" 
-        (click)="next()" />
+        (onClick)="next()" />
 </div>
 <p-galleria 
     [(value)]="images" 
@@ -104,13 +104,13 @@ export class ControlledDoc implements OnInit {
         <p-button 
             type="button" 
             icon="pi pi-minus" 
-            (click)="prev()" 
+            (onClick)="prev()" 
             severity="secondary" 
             styleClass="mr-2" />
         <p-button 
             type="button" 
             icon="pi pi-plus" 
-            (click)="next()" />
+            (onClick)="next()" />
     </div>
     <p-galleria 
         [(value)]="images" 
diff --git a/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts b/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts
index 7dbf02c9836..cf2c571fef3 100644
--- a/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts
+++ b/src/app/showcase/doc/galleria/fullscreen/withoutthumbnailsdoc.ts
@@ -9,7 +9,7 @@ import { PhotoService } from '@service/photoservice';
             <p>Thumbnails can also be hidden in full screen mode.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button icon="pi pi-external-link" label="Show" (click)="displayBasic = true" />
+            <p-button icon="pi pi-external-link" label="Show" (onClick)="displayBasic = true" />
             <p-galleria
                 [(value)]="images"
                 [(visible)]="displayBasic"
@@ -80,7 +80,7 @@ export class WithoutThumbnailsDoc implements OnInit {
     <p-button 
     icon="pi pi-external-link" 
     label="Show" 
-    (click)="displayBasic = true" />
+    (onClick)="displayBasic = true" />
         <p-galleria
             [(value)]="images"
             [(visible)]="displayBasic"
diff --git a/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts b/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts
index ed0a9acbdb0..54fdc69ce26 100644
--- a/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts
+++ b/src/app/showcase/doc/galleria/fullscreen/withthumbnailsdoc.ts
@@ -9,7 +9,7 @@ import { PhotoService } from '@service/photoservice';
             <p>Full screen mode is enabled by adding <i>fullScreen</i> property.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button icon="pi pi-external-link" label="Show" (click)="displayBasic = true" />
+            <p-button icon="pi pi-external-link" label="Show" (onClick)="displayBasic = true" />
             <p-galleria [(value)]="images" [(visible)]="displayBasic" [responsiveOptions]="responsiveOptions" [containerStyle]="{ 'max-width': '50%' }" [numVisible]="9" [circular]="true" [fullScreen]="true" [showItemNavigators]="true">
                 <ng-template pTemplate="item" let-item>
                     <img [src]="item.itemImageSrc" style="width: 100%; display: block;" />
@@ -81,7 +81,7 @@ export class WithThumbnailsDoc implements OnInit {
     <p-button 
         icon="pi pi-external-link" 
         label="Show" 
-        (click)="displayBasic = true" />
+        (onClick)="displayBasic = true" />
     <p-galleria 
         [(value)]="images" 
         [(visible)]="displayBasic" 
diff --git a/src/app/showcase/doc/knob/reactivedoc.ts b/src/app/showcase/doc/knob/reactivedoc.ts
index 9eef10ca272..b1c260d6c34 100644
--- a/src/app/showcase/doc/knob/reactivedoc.ts
+++ b/src/app/showcase/doc/knob/reactivedoc.ts
@@ -10,8 +10,8 @@ import { Code } from '@domain/code';
         <div class="card flex flex-column align-items-center gap-2">
             <p-knob [(ngModel)]="value" size="150" readonly="true" />
             <div class="flex gap-2">
-                <p-button icon="pi pi-plus" (click)="value = value + 1" [disabled]="value >= 100" />
-                <p-button icon="pi pi-minus" (click)="value = value - 1" [disabled]="value <= 0" />
+                <p-button icon="pi pi-plus" (onClick)="value = value + 1" [disabled]="value >= 100" />
+                <p-button icon="pi pi-minus" (onClick)="value = value - 1" [disabled]="value <= 0" />
             </div>
         </div>
         <app-code [code]="code" selector="knob-reactive-demo"></app-code>
@@ -25,11 +25,11 @@ export class ReactiveDoc {
 <div class="flex gap-2">
     <p-button 
         icon="pi pi-plus" 
-        (click)="value = value+1" 
+        (onClick)="value = value+1" 
         [disabled]="value >= 100" />
     <p-button 
         icon="pi pi-minus" 
-        (click)="value = value-1" 
+        (onClick)="value = value-1" 
         [disabled]="value <= 0" />
 </div>`,
 
@@ -38,11 +38,11 @@ export class ReactiveDoc {
 <div class="flex gap-2">
     <p-button 
         icon="pi pi-plus" 
-        (click)="value = value+1" 
+        (onClick)="value = value+1" 
         [disabled]="value >= 100" />
     <p-button 
         icon="pi pi-minus" 
-        (click)="value = value-1" 
+        (onClick)="value = value-1" 
         [disabled]="value <= 0" />
 </div>
 </div>`,
diff --git a/src/app/showcase/doc/menu/popupdoc.ts b/src/app/showcase/doc/menu/popupdoc.ts
index 4b48845b504..c37ae1bcca2 100644
--- a/src/app/showcase/doc/menu/popupdoc.ts
+++ b/src/app/showcase/doc/menu/popupdoc.ts
@@ -10,7 +10,7 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-menu #menu [model]="items" [popup]="true" />
-            <p-button (click)="menu.toggle($event)" icon="pi pi-ellipsis-v" />
+            <p-button (onClick)="menu.toggle($event)" icon="pi pi-ellipsis-v" />
         </div>
         <app-code [code]="code" selector="menu-popup-demo"></app-code>
     `,
@@ -39,11 +39,11 @@ export class PopupDoc implements OnInit {
     code: Code = {
         basic: `<p-toast />
 <p-menu #menu [model]="items" [popup]="true" />
-<p-button (click)="menu.toggle($event)" icon="pi pi-ellipsis-v"/>`,
+<p-button (onClick)="menu.toggle($event)" icon="pi pi-ellipsis-v"/>`,
 
         html: `<div class="card flex justify-content-center">
     <p-menu #menu [model]="items" [popup]="true" />
-    <p-button (click)="menu.toggle($event)" icon="pi pi-ellipsis-v"/>
+    <p-button (onClick)="menu.toggle($event)" icon="pi pi-ellipsis-v"/>
 </div>`,
 
         typescript: `import { Component, OnInit } from '@angular/core';
diff --git a/src/app/showcase/doc/messages/dynamicdoc.ts b/src/app/showcase/doc/messages/dynamicdoc.ts
index 061088c95d5..b7189d304b1 100644
--- a/src/app/showcase/doc/messages/dynamicdoc.ts
+++ b/src/app/showcase/doc/messages/dynamicdoc.ts
@@ -9,8 +9,8 @@ import { Code } from '@domain/code';
             <p>A binding to the value property is required to provide messages to the component.</p>
         </app-docsectiontext>
         <div class="card">
-            <p-button type="button" pRipple (click)="addMessages()" label="Show" styleClass="mr-2" />
-            <p-button type="button" pRipple (click)="clearMessages()" label="Clear" severity="secondary" />
+            <p-button type="button" pRipple (onClick)="addMessages()" label="Show" styleClass="mr-2" />
+            <p-button type="button" pRipple (onClick)="clearMessages()" label="Clear" severity="secondary" />
             <p-messages [(value)]="messages" [enableService]="false" />
         </div>
         <app-code [code]="code" selector="messages-dynamic-demo"></app-code>
@@ -35,13 +35,13 @@ export class DynamicDoc {
         basic: `<p-button 
     type="button" 
     pRipple 
-    (click)="addMessages()" 
+    (onClick)="addMessages()" 
     label="Show" 
     styleClass="mr-2" />
 <p-button 
     type="button" 
     pRipple 
-    (click)="clearMessages()" 
+    (onClick)="clearMessages()" 
     label="Clear" 
     severity="secondary" />
 <p-messages [(value)]="messages" [enableService]="false" />`,
@@ -49,13 +49,13 @@ export class DynamicDoc {
     <p-button 
         type="button" 
         pRipple 
-        (click)="addMessages()" 
+        (onClick)="addMessages()" 
         label="Show" 
         styleClass="mr-2" />
     <p-button 
         type="button"
         pRipple 
-        (click)="clearMessages()" 
+        (onClick)="clearMessages()" 
         label="Clear" 
         severity="secondary" />
     <p-messages [(value)]="messages" [enableService]="false" />
diff --git a/src/app/showcase/doc/messages/servicedoc.ts b/src/app/showcase/doc/messages/servicedoc.ts
index a2410777643..da72f079bbd 100644
--- a/src/app/showcase/doc/messages/servicedoc.ts
+++ b/src/app/showcase/doc/messages/servicedoc.ts
@@ -13,9 +13,9 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card">
             <div class="flex justify-content-center gap-2">
-                <p-button (click)="addSingle()" label="Show Single" />
-                <p-button severity="success" (click)="addMultiple()" label="Show Multiple" />
-                <p-button severity="secondary" (click)="clear()" label="Clear All" />
+                <p-button (onClick)="addSingle()" label="Show Single" />
+                <p-button severity="success" (onClick)="addMultiple()" label="Show Multiple" />
+                <p-button severity="secondary" (onClick)="clear()" label="Clear All" />
             </div>
             <p-messages />
         </div>
@@ -43,16 +43,16 @@ export class ServiceDoc {
 
     code: Code = {
         basic: `<div class="flex justify-content-center gap-2">
-    <p-button (click)="addSingle()" label="Show Single" />
-    <p-button severity="success" (click)="addMultiple()" label="Show Multiple" />
-    <p-button severity="secondary" (click)="clear()" label="Clear All" />
+    <p-button (onClick)="addSingle()" label="Show Single" />
+    <p-button severity="success" (onClick)="addMultiple()" label="Show Multiple" />
+    <p-button severity="secondary" (onClick)="clear()" label="Clear All" />
 </div>
 <p-messages />`,
         html: `<div class="card">
     <div class="flex justify-content-center gap-2">
-        <p-button (click)="addSingle()" label="Show Single" />
-        <p-button severity="success" (click)="addMultiple()" label="Show Multiple" />
-        <p-button severity="secondary" (click)="clear()" label="Clear All" />
+        <p-button (onClick)="addSingle()" label="Show Single" />
+        <p-button severity="success" (onClick)="addMultiple()" label="Show Multiple" />
+        <p-button severity="secondary" (onClick)="clear()" label="Clear All" />
     </div>
     <p-messages />
 </div>`,
diff --git a/src/app/showcase/doc/overlay/basicdoc.ts b/src/app/showcase/doc/overlay/basicdoc.ts
index 3cecc5d39dc..e487bc87d8b 100644
--- a/src/app/showcase/doc/overlay/basicdoc.ts
+++ b/src/app/showcase/doc/overlay/basicdoc.ts
@@ -7,7 +7,7 @@ import { Code } from '@domain/code';
             <p>Overlay is a container to display content in an overlay window. All the options mentioned above can be used as props for this component.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button (click)="toggle()" label="Show Overlay"></p-button>
+            <p-button (onClick)="toggle()" label="Show Overlay"></p-button>
             <p-overlay [(visible)]="overlayVisible" [responsive]="{ breakpoint: '640px', direction: 'bottom', contentStyleClass: 'h-20rem' }" contentStyleClass="p-4 surface-overlay shadow-2 border-round"> Content </p-overlay>
         </div>
         <app-code [code]="code" selector="overlay-basic-demo"></app-code>`
@@ -20,13 +20,13 @@ export class OverlayBasicDemo {
     }
 
     code: Code = {
-        basic: `<p-button (click)="toggle()" label="Show Overlay"></p-button>
+        basic: `<p-button (onClick)="toggle()" label="Show Overlay"></p-button>
 <p-overlay [(visible)]="overlayVisible" [responsive]="{ breakpoint: '640px', direction: 'bottom', contentStyleClass: 'h-20rem' }" contentStyleClass="p-4 surface-overlay shadow-2 border-round">
     Content
 </p-overlay>`,
         html: `
 <div class="card flex justify-content-center">
-    <p-button (click)="toggle()" label="Show Overlay"></p-button>
+    <p-button (onClick)="toggle()" label="Show Overlay"></p-button>
     <p-overlay [(visible)]="overlayVisible" [responsive]="{ breakpoint: '640px', direction: 'bottom', contentStyleClass: 'h-20rem' }" contentStyleClass="p-4 surface-overlay shadow-2 border-round">
         Content
     </p-overlay>
diff --git a/src/app/showcase/doc/overlay/templatedoc.ts b/src/app/showcase/doc/overlay/templatedoc.ts
index 1e8bc399e65..9d431f86b90 100644
--- a/src/app/showcase/doc/overlay/templatedoc.ts
+++ b/src/app/showcase/doc/overlay/templatedoc.ts
@@ -7,7 +7,7 @@ import { Code } from '@domain/code';
             <p>Content can be customized with the <i>content</i> template.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button (click)="toggle()" label="Show Overlay"></p-button>
+            <p-button (onClick)="toggle()" label="Show Overlay"></p-button>
             <p-overlay [(visible)]="overlayVisible" [responsive]="{ breakpoint: '640px', direction: 'bottom', contentStyleClass: 'h-20rem' }" contentStyleClass="p-4 surface-overlay shadow-2 border-round">
                 <ng-template pTemplate="content" let-option> Content - {{ option.mode }} </ng-template>
             </p-overlay>
@@ -22,7 +22,7 @@ export class OverlayTemplateDemo {
     }
 
     code: Code = {
-        basic: `<p-button (click)="toggle()" label="Show Overlay"></p-button>
+        basic: `<p-button (onClick)="toggle()" label="Show Overlay"></p-button>
 <p-overlay [(visible)]="overlayVisible" [responsive]="{ breakpoint: '640px', direction: 'bottom', contentStyleClass: 'h-20rem' }" contentStyleClass="p-4 surface-overlay shadow-2 border-round">
     <ng-template pTemplate="content" let-option>
         Content - {{option.mode}}
@@ -30,7 +30,7 @@ export class OverlayTemplateDemo {
 </p-overlay>`,
         html: `
 <div class="card flex justify-content-center">
-    <p-button (click)="toggle()" label="Show Overlay"></p-button>
+    <p-button (onClick)="toggle()" label="Show Overlay"></p-button>
     <p-overlay [(visible)]="overlayVisible" [responsive]="{ breakpoint: '640px', direction: 'bottom', contentStyleClass: 'h-20rem' }" contentStyleClass="p-4 surface-overlay shadow-2 border-round">
         <ng-template pTemplate="content" let-option>
             Content - {{option.mode}}
diff --git a/src/app/showcase/doc/overlaypanel/basicdoc.ts b/src/app/showcase/doc/overlaypanel/basicdoc.ts
index 368f29641d3..bececac4c50 100644
--- a/src/app/showcase/doc/overlaypanel/basicdoc.ts
+++ b/src/app/showcase/doc/overlaypanel/basicdoc.ts
@@ -8,7 +8,7 @@ import { Code } from '@domain/code';
             <p>OverlayPanel is accessed via its reference and visibility is controlled using <i>toggle</i>, <i>show</i> and <i>hide</i> methods with an event of the target.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button (click)="op.toggle($event)" icon="pi pi-share-alt" label="Share" />
+            <p-button (onClick)="op.toggle($event)" icon="pi pi-share-alt" label="Share" />
             <p-overlayPanel #op>
                 <div class="flex flex-column gap-3 w-25rem">
                     <div>
@@ -57,7 +57,7 @@ export class BasicDoc {
     ];
 
     code: Code = {
-        basic: `<p-button (click)="op.toggle($event)" icon="pi pi-share-alt" label="Share" />
+        basic: `<p-button (onClick)="op.toggle($event)" icon="pi pi-share-alt" label="Share" />
     <p-overlayPanel #op>
         <div class="flex flex-column gap-3 w-25rem">
             <div>
@@ -96,7 +96,7 @@ export class BasicDoc {
     </p-overlayPanel>`,
 
         html: `<div class="card flex justify-content-center">
-    <p-button (click)="op.toggle($event)" icon="pi pi-share-alt" label="Share" />
+    <p-button (onClick)="op.toggle($event)" icon="pi pi-share-alt" label="Share" />
     <p-overlayPanel #op>
         <div class="flex flex-column gap-3 w-25rem">
             <div>
diff --git a/src/app/showcase/doc/overlaypanel/datatabledoc.ts b/src/app/showcase/doc/overlaypanel/datatabledoc.ts
index fbaca20ba0c..b1c725b04e5 100644
--- a/src/app/showcase/doc/overlaypanel/datatabledoc.ts
+++ b/src/app/showcase/doc/overlaypanel/datatabledoc.ts
@@ -20,7 +20,7 @@ interface TableRowSelectEvent {
         </app-docsectiontext>
         <div class="card flex flex-column align-items-center gap-3">
             <p-toast />
-            <p-button (click)="op.toggle($event)" icon="pi pi-search" [label]="selectedProduct ? selectedProduct.name : 'Select a Product'" />
+            <p-button (onClick)="op.toggle($event)" icon="pi pi-search" [label]="selectedProduct ? selectedProduct.name : 'Select a Product'" />
             <div *ngIf="selectedProduct" class="p-5 surface-card shadow-2 border-round">
                 <div class="relative">
                     <img src="https://primefaces.org/cdn/primeng/images/demo/product/{{ selectedProduct.image }}" [alt]="selectedProduct.name" />
@@ -83,7 +83,7 @@ export class DataTableDoc implements OnInit {
     code: Code = {
         basic: `<p-toast />
 <p-button 
-    (click)="op.toggle($event)" 
+    (onClick)="op.toggle($event)" 
     icon="pi pi-search" 
     [label]="selectedProduct ? selectedProduct.name : 'Select a Product'" />
 <div *ngIf="selectedProduct" class="p-5 surface-card shadow-2 border-round">
@@ -146,7 +146,7 @@ export class DataTableDoc implements OnInit {
         html: `<div class="card flex flex-column align-items-center gap-3">
 <p-toast />
 <p-button 
-    (click)="op.toggle($event)" 
+    (onClick)="op.toggle($event)" 
     icon="pi pi-search" 
     [label]="selectedProduct ? selectedProduct.name : 'Select a Product'" />
 <div *ngIf="selectedProduct" class="p-5 surface-card shadow-2 border-round">
diff --git a/src/app/showcase/doc/overlaypanel/targetdoc.ts b/src/app/showcase/doc/overlaypanel/targetdoc.ts
index 8c6ea3bc915..f5ddace706c 100644
--- a/src/app/showcase/doc/overlaypanel/targetdoc.ts
+++ b/src/app/showcase/doc/overlaypanel/targetdoc.ts
@@ -11,7 +11,7 @@ import { Code } from '@domain/code';
             </p>
         </app-docsectiontext>
         <div class="card flex flex-column align-items-center gap-3">
-            <p-button (click)="op.show($event, targetEl)" icon="pi pi-image" label="Show"></p-button>
+            <p-button (onClick)="op.show($event, targetEl)" icon="pi pi-image" label="Show"></p-button>
             <div #targetEl class="mt-5 w-10rem h-5rem border-1 surface-border border-round flex align-items-center justify-content-center">
                 <span>Target Element</span>
             </div>
@@ -24,7 +24,7 @@ import { Code } from '@domain/code';
 })
 export class TargetDoc {
     code: Code = {
-        basic: `<p-button (click)="op.show($event, targetEl)" icon="pi pi-image" label="Show"></p-button>
+        basic: `<p-button (onClick)="op.show($event, targetEl)" icon="pi pi-image" label="Show"></p-button>
 <div #targetEl class="mt-5 w-10rem h-5rem border-1 surface-border border-round flex align-items-center justify-content-center">
     <span>Target Element</span>
 </div>
@@ -34,7 +34,7 @@ export class TargetDoc {
 
         html: `
 <div class="card flex flex-column align-items-center gap-3">
-    <p-button (click)="op.show($event, targetEl)" icon="pi pi-image" label="Show"></p-button>
+    <p-button (onClick)="op.show($event, targetEl)" icon="pi pi-image" label="Show"></p-button>
     <div #targetEl class="mt-5 w-10rem h-5rem border-1 surface-border border-round flex align-items-center justify-content-center">
         <span>Target Element</span>
     </div>
diff --git a/src/app/showcase/doc/overlaypanel/templatedoc.ts b/src/app/showcase/doc/overlaypanel/templatedoc.ts
index 950792d09b5..cf07a88e7aa 100644
--- a/src/app/showcase/doc/overlaypanel/templatedoc.ts
+++ b/src/app/showcase/doc/overlaypanel/templatedoc.ts
@@ -13,7 +13,7 @@ import { Code } from '@domain/code';
                     <h4>Custom Content</h4>
                 </ng-template>
             </p-overlayPanel>
-            <p-button (click)="op.toggle($event)" icon="pi pi-image" label="Show"></p-button>
+            <p-button (onClick)="op.toggle($event)" icon="pi pi-image" label="Show"></p-button>
         </div>
         <app-code [code]="code" selector="overlay-panel-template-demo"></app-code>
     `
@@ -25,7 +25,7 @@ export class TemplateDoc {
         <h4>Custom Content</h4>
     </ng-template>
 </p-overlayPanel>
-<p-button (click)="op.toggle($event)" icon="pi pi-image" label="Show"></p-button>`,
+<p-button (onClick)="op.toggle($event)" icon="pi pi-image" label="Show"></p-button>`,
 
         html: `
 <div class="card flex justify-content-center">
@@ -34,7 +34,7 @@ export class TemplateDoc {
             <h4>Custom Content</h4>
         </ng-template>
     </p-overlayPanel>
-    <p-button (click)="op.toggle($event)" icon="pi pi-image" label="Show"></p-button>
+    <p-button (onClick)="op.toggle($event)" icon="pi pi-image" label="Show"></p-button>
 </div>`,
 
         typescript: `
diff --git a/src/app/showcase/doc/scroller/programmaticdoc.ts b/src/app/showcase/doc/scroller/programmaticdoc.ts
index 4aaf77e5e5a..613d21f440e 100644
--- a/src/app/showcase/doc/scroller/programmaticdoc.ts
+++ b/src/app/showcase/doc/scroller/programmaticdoc.ts
@@ -9,7 +9,7 @@ import { Code } from '@domain/code';
             <p>Scrolling to a specific index can be done with the <i>scrollToIndex</i> function.</p>
         </app-docsectiontext>
         <div class="card flex flex-column align-items-center gap-3">
-            <p-button label="Reset" (click)="reset()" />
+            <p-button label="Reset" (onClick)="reset()" />
             <p-scroller #sc [items]="items" [itemSize]="50" scrollHeight="200px" styleClass="border-1 surface-border" [style]="{ width: '200px', height: '200px' }">
                 <ng-template pTemplate="item" let-item let-options="options">
                     <div class="flex align-items-center p-2" [ngClass]="{ 'surface-ground': options.odd }" style="height: 50px;">{{ item }}</div>
@@ -33,7 +33,7 @@ export class ProgrammaticDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `<p-button label="Reset" (click)="reset()" />
+        basic: `<p-button label="Reset" (onClick)="reset()" />
 <p-scroller 
     #sc [items]="items" 
     [itemSize]="50" 
@@ -51,7 +51,7 @@ export class ProgrammaticDoc implements OnInit {
 </p-scroller>`,
 
         html: `<div class="card flex flex-column align-items-center gap-3">
-    <p-button label="Reset" (click)="reset()" />
+    <p-button label="Reset" (onClick)="reset()" />
     <p-scroller 
         #sc 
         [items]="items" 
diff --git a/src/app/showcase/doc/sidebar/basicdoc.ts b/src/app/showcase/doc/sidebar/basicdoc.ts
index 35422006da6..8942b399463 100644
--- a/src/app/showcase/doc/sidebar/basicdoc.ts
+++ b/src/app/showcase/doc/sidebar/basicdoc.ts
@@ -15,7 +15,7 @@ import { Code } from '@domain/code';
                     consequat.
                 </p>
             </p-sidebar>
-            <p-button (click)="sidebarVisible = true" icon="pi pi-arrow-right" />
+            <p-button (onClick)="sidebarVisible = true" icon="pi pi-arrow-right" />
         </div>
         <app-code [code]="code" selector="sidebar-basic-demo"></app-code>
     `
@@ -30,7 +30,7 @@ export class BasicDoc {
         Lorem ipsum dolor sit amet...
     </p>
 </p-sidebar>
-<p-button (click)="sidebarVisible = true" icon="pi pi-arrow-right" />`,
+<p-button (onClick)="sidebarVisible = true" icon="pi pi-arrow-right" />`,
 
         html: `<div class="card flex justify-content-center">
     <p-sidebar [(visible)]="sidebarVisible">
@@ -40,7 +40,7 @@ export class BasicDoc {
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </p>
     </p-sidebar>
-    <p-button (click)="sidebarVisible = true" icon="pi pi-arrow-right" />
+    <p-button (onClick)="sidebarVisible = true" icon="pi pi-arrow-right" />
 </div>`,
 
         typescript: `import { Component } from '@angular/core';
diff --git a/src/app/showcase/doc/sidebar/fullscreendoc.ts b/src/app/showcase/doc/sidebar/fullscreendoc.ts
index 74afbcde5f5..d0a86799161 100644
--- a/src/app/showcase/doc/sidebar/fullscreendoc.ts
+++ b/src/app/showcase/doc/sidebar/fullscreendoc.ts
@@ -17,7 +17,7 @@ import { Code } from '@domain/code';
                     consequat.
                 </p>
             </p-sidebar>
-            <p-button (click)="sidebarVisible = true" icon="pi pi-window-maximize" />
+            <p-button (onClick)="sidebarVisible = true" icon="pi pi-window-maximize" />
         </div>
         <app-code [code]="code" selector="sidebar-full-screen-demo"></app-code>
     `
@@ -36,7 +36,7 @@ export class FullScreenDoc {
             Lorem ipsum dolor sit amet, consectetur adipiscing elit...
         </p>
     </p-sidebar>
-<p-button (click)="sidebarVisible = true" icon="pi pi-window-maximize" />`,
+<p-button (onClick)="sidebarVisible = true" icon="pi pi-window-maximize" />`,
 
         html: `<div class="card flex justify-content-center">
     <p-sidebar [(visible)]="sidebarVisible" [fullScreen]="true">
@@ -50,7 +50,7 @@ export class FullScreenDoc {
             consequat.
         </p>
     </p-sidebar>
-    <p-button (click)="sidebarVisible = true" icon="pi pi-window-maximize" />
+    <p-button (onClick)="sidebarVisible = true" icon="pi pi-window-maximize" />
 </div>`,
 
         typescript: `import { Component } from '@angular/core';
diff --git a/src/app/showcase/doc/sidebar/headlessdoc.ts b/src/app/showcase/doc/sidebar/headlessdoc.ts
index 84339200127..27d2d2dc432 100644
--- a/src/app/showcase/doc/sidebar/headlessdoc.ts
+++ b/src/app/showcase/doc/sidebar/headlessdoc.ts
@@ -46,7 +46,7 @@ import { Sidebar } from 'primeng/sidebar';
                                 <span class="font-semibold text-2xl text-primary">Your Logo</span>
                             </span>
                             <span>
-                                <p-button type="button" (click)="closeCallback($event)" icon="pi pi-times" rounded="true" outlined="true" styleClass="h-2rem w-2rem"></p-button>
+                                <p-button type="button" (onClick)="closeCallback($event)" icon="pi pi-times" rounded="true" outlined="true" styleClass="h-2rem w-2rem"></p-button>
                             </span>
                         </div>
                         <div class="overflow-y-auto">
@@ -204,7 +204,7 @@ import { Sidebar } from 'primeng/sidebar';
                     </div>
                 </ng-template>
             </p-sidebar>
-            <p-button (click)="sidebarVisible = true" icon="pi pi-arrow-right"></p-button>
+            <p-button (onClick)="sidebarVisible = true" icon="pi pi-arrow-right"></p-button>
         </div>
         <app-code [code]="code" selector="sidebar-headless-demo"></app-code>
     `
@@ -256,7 +256,7 @@ export class HeadlessDoc {
                     <span class="font-semibold text-2xl text-primary">Your Logo</span>
                 </span>
                 <span>
-                    <p-button type="button" (click)="closeCallback($event)" icon="pi pi-times" rounded="true" outlined="true" styleClass="h-2rem w-2rem"></p-button>
+                    <p-button type="button" (onClick)="closeCallback($event)" icon="pi pi-times" rounded="true" outlined="true" styleClass="h-2rem w-2rem"></p-button>
                 </span>
             </div>
             <div class="overflow-y-auto">
@@ -414,7 +414,7 @@ export class HeadlessDoc {
         </div>
     </ng-template>
 </p-sidebar>
-<p-button (click)="sidebarVisible = true" icon="pi pi-arrow-right"></p-button>`,
+<p-button (onClick)="sidebarVisible = true" icon="pi pi-arrow-right"></p-button>`,
 
         html: `<div class="card flex justify-content-center">
 <p-sidebar #sidebarRef [(visible)]="sidebarVisible">
@@ -454,7 +454,7 @@ export class HeadlessDoc {
                     <span class="font-semibold text-2xl text-primary">Your Logo</span>
                 </span>
                 <span>
-                    <p-button type="button" (click)="closeCallback($event)" icon="pi pi-times" rounded="true" outlined="true" styleClass="h-2rem w-2rem"></p-button>
+                    <p-button type="button" (onClick)="closeCallback($event)" icon="pi pi-times" rounded="true" outlined="true" styleClass="h-2rem w-2rem"></p-button>
                 </span>
             </div>
             <div class="overflow-y-auto">
@@ -612,7 +612,7 @@ export class HeadlessDoc {
         </div>
     </ng-template>
 </p-sidebar>
-<p-button (click)="sidebarVisible = true" icon="pi pi-arrow-right"></p-button>
+<p-button (onClick)="sidebarVisible = true" icon="pi pi-arrow-right"></p-button>
 </div>`,
 
         typescript: `import { Component, ViewChild } from '@angular/core';
diff --git a/src/app/showcase/doc/sidebar/positiondoc.ts b/src/app/showcase/doc/sidebar/positiondoc.ts
index bc07e85a796..d94007f5880 100644
--- a/src/app/showcase/doc/sidebar/positiondoc.ts
+++ b/src/app/showcase/doc/sidebar/positiondoc.ts
@@ -24,10 +24,10 @@ import { Code } from '@domain/code';
                 <h3>Bottom Sidebar</h3>
             </p-sidebar>
 
-            <p-button type="button" class="mr-2" (click)="sidebarVisible1 = true" icon="pi pi-arrow-right" />
-            <p-button type="button" class="mr-2" (click)="sidebarVisible2 = true" icon="pi pi-arrow-left" />
-            <p-button type="button" class="mr-2" (click)="sidebarVisible3 = true" icon="pi pi-arrow-down" />
-            <p-button type="button" class="mr-2" (click)="sidebarVisible4 = true" icon="pi pi-arrow-up" />
+            <p-button type="button" class="mr-2" (onClick)="sidebarVisible1 = true" icon="pi pi-arrow-right" />
+            <p-button type="button" class="mr-2" (onClick)="sidebarVisible2 = true" icon="pi pi-arrow-left" />
+            <p-button type="button" class="mr-2" (onClick)="sidebarVisible3 = true" icon="pi pi-arrow-down" />
+            <p-button type="button" class="mr-2" (onClick)="sidebarVisible4 = true" icon="pi pi-arrow-up" />
         </div>
         <app-code [code]="code" selector="sidebar-position-demo"></app-code>
     `
@@ -61,22 +61,22 @@ export class PositionDoc {
 <p-button 
     type="button" 
     class="mr-2" 
-    (click)="sidebarVisible1 = true" 
+    (onClick)="sidebarVisible1 = true" 
     icon="pi pi-arrow-right" />
 <p-button 
     type="button" 
     class="mr-2" 
-    (click)="sidebarVisible2 = true" 
+    (onClick)="sidebarVisible2 = true" 
     icon="pi pi-arrow-left" />
 <p-button 
     type="button" 
     class="mr-2" 
-    (click)="sidebarVisible3 = true" 
+    (onClick)="sidebarVisible3 = true" 
     icon="pi pi-arrow-down" />
 <p-button 
     type="button" 
     class="mr-2" 
-    (click)="sidebarVisible4 = true" 
+    (onClick)="sidebarVisible4 = true" 
     icon="pi pi-arrow-up" />`,
 
         html: `<div class="card flex flex-wrap justify-content-center gap-2">
@@ -99,22 +99,22 @@ export class PositionDoc {
     <p-button 
         type="button"
         class="mr-2" 
-        (click)="sidebarVisible1 = true" 
+        (onClick)="sidebarVisible1 = true" 
         icon="pi pi-arrow-right" />
     <p-button 
         type="button" 
         class="mr-2" 
-        (click)="sidebarVisible2 = true" 
+        (onClick)="sidebarVisible2 = true" 
         icon="pi pi-arrow-left" />
     <p-button 
         type="button"
         class="mr-2" 
-        (click)="sidebarVisible3 = true" 
+        (onClick)="sidebarVisible3 = true" 
         icon="pi pi-arrow-down" />
     <p-button 
         type="button" 
         class="mr-2" 
-        (click)="sidebarVisible4 = true" 
+        (onClick)="sidebarVisible4 = true" 
         icon="pi pi-arrow-up" />
 </div>`,
 
diff --git a/src/app/showcase/doc/sidebar/sizedoc.ts b/src/app/showcase/doc/sidebar/sizedoc.ts
index 974baf5dacc..65fcdee413f 100644
--- a/src/app/showcase/doc/sidebar/sizedoc.ts
+++ b/src/app/showcase/doc/sidebar/sizedoc.ts
@@ -17,7 +17,7 @@ import { Code } from '@domain/code';
                     consequat.
                 </p>
             </p-sidebar>
-            <p-button (click)="sidebarVisible = true" icon="pi pi-arrow-right" />
+            <p-button (onClick)="sidebarVisible = true" icon="pi pi-arrow-right" />
         </div>
         <app-code [code]="code" selector="sidebar-size-demo"></app-code>
     `
@@ -34,7 +34,7 @@ export class SizeDoc {
         Lorem ipsum dolor sit amet, consectetur adipiscing elit...
     </p>
 </p-sidebar>
-<p-button (click)="sidebarVisible = true" icon="pi pi-arrow-right" />`,
+<p-button (onClick)="sidebarVisible = true" icon="pi pi-arrow-right" />`,
 
         html: `<div class="card flex justify-content-center">
     <p-sidebar [(visible)]="sidebarVisible" styleClass="w-30rem">
@@ -46,7 +46,7 @@ export class SizeDoc {
             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </p>
     </p-sidebar>
-    <p-button (click)="sidebarVisible = true" icon="pi pi-arrow-right" />
+    <p-button (onClick)="sidebarVisible = true" icon="pi pi-arrow-right" />
 </div>`,
 
         typescript: `import { Component } from '@angular/core';
diff --git a/src/app/showcase/doc/sidebar/templatedoc.ts b/src/app/showcase/doc/sidebar/templatedoc.ts
index 4862df52b0e..12545f8d687 100644
--- a/src/app/showcase/doc/sidebar/templatedoc.ts
+++ b/src/app/showcase/doc/sidebar/templatedoc.ts
@@ -20,7 +20,7 @@ import { Code } from '@domain/code';
                     consequat.
                 </p>
             </p-sidebar>
-            <p-button (click)="sidebarVisible = true" icon="pi pi-plus" />
+            <p-button (onClick)="sidebarVisible = true" icon="pi pi-plus" />
         </div>
         <app-code [code]="code" selector="sidebar-template-demo"></app-code>
     `
@@ -44,7 +44,7 @@ export class TemplateDoc {
         Lorem ipsum dolor sit amet...
     </p>
 </p-sidebar>
-<p-button (click)="sidebarVisible = true" icon="pi pi-plus" />`,
+<p-button (onClick)="sidebarVisible = true" icon="pi pi-plus" />`,
 
         html: `<div class="card flex justify-content-center">
     <p-sidebar [(visible)]="sidebarVisible">
@@ -63,7 +63,7 @@ export class TemplateDoc {
             consequat.
         </p>
     </p-sidebar>
-    <p-button (click)="sidebarVisible = true" icon="pi pi-plus" />
+    <p-button (onClick)="sidebarVisible = true" icon="pi pi-plus" />
 </div>`,
 
         typescript: `import { Component } from '@angular/core';
diff --git a/src/app/showcase/doc/steps/controlleddoc.ts b/src/app/showcase/doc/steps/controlleddoc.ts
index 970861c7242..58cf648f181 100644
--- a/src/app/showcase/doc/steps/controlleddoc.ts
+++ b/src/app/showcase/doc/steps/controlleddoc.ts
@@ -10,9 +10,9 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card">
             <div class="flex mb-5 gap-2 justify-content-end">
-                <p-button (click)="active = 0" [rounded]="true" label="1" styleClass="w-2rem h-2rem p-0" [outlined]="active !== 0" />
-                <p-button (click)="active = 1" [rounded]="true" label="2" styleClass="w-2rem h-2rem p-0" [outlined]="active !== 1" />
-                <p-button (click)="active = 2" [rounded]="true" label="3" styleClass="w-2rem h-2rem p-0" [outlined]="active !== 2" />
+                <p-button (onClick)="active = 0" [rounded]="true" label="1" styleClass="w-2rem h-2rem p-0" [outlined]="active !== 0" />
+                <p-button (onClick)="active = 1" [rounded]="true" label="2" styleClass="w-2rem h-2rem p-0" [outlined]="active !== 1" />
+                <p-button (onClick)="active = 2" [rounded]="true" label="3" styleClass="w-2rem h-2rem p-0" [outlined]="active !== 2" />
             </div>
             <p-steps [activeIndex]="active" [model]="items" />
         </div>
@@ -41,19 +41,19 @@ export class ControlledDoc implements OnInit {
     code: Code = {
         basic: `<div class="flex mb-5 gap-2 justify-content-end">
     <p-button 
-        (click)="active = 0" 
+        (onClick)="active = 0" 
         [rounded]="true" 
         label="1" 
         styleClass="w-2rem h-2rem p-0" 
         [outlined]="active !== 0" />
     <p-button 
-        (click)="active = 1" 
+        (onClick)="active = 1" 
         [rounded]="true"
         label="2" 
         styleClass="w-2rem h-2rem p-0" 
         [outlined]="active !== 1" />
     <p-button 
-        (click)="active = 2" 
+        (onClick)="active = 2" 
         [rounded]="true" 
         label="3" 
         styleClass="w-2rem h-2rem p-0" 
@@ -64,19 +64,19 @@ export class ControlledDoc implements OnInit {
         html: `<div class="card">
     <div class="flex mb-5 gap-2 justify-content-end">
         <p-button 
-            (click)="active = 0" 
+            (onClick)="active = 0" 
             [rounded]="true" 
             label="1" 
             styleClass="w-2rem h-2rem p-0" 
             [outlined]="active !== 0" />
         <p-button 
-            (click)="active = 1" 
+            (onClick)="active = 1" 
             [rounded]="true" 
             label="2" 
             styleClass="w-2rem h-2rem p-0" 
             [outlined]="active !== 1" />
         <p-button 
-            (click)="active = 2" 
+            (onClick)="active = 2" 
             [rounded]="true" 
             label="3" 
             styleClass="w-2rem h-2rem p-0" 
diff --git a/src/app/showcase/doc/table/customersdoc.ts b/src/app/showcase/doc/table/customersdoc.ts
index c46750f4986..832dfb7a29e 100644
--- a/src/app/showcase/doc/table/customersdoc.ts
+++ b/src/app/showcase/doc/table/customersdoc.ts
@@ -28,7 +28,7 @@ import { Table } from 'primeng/table';
                 >
                     <ng-template pTemplate="caption">
                         <div class="flex justify-content-between">
-                            <p-button [outlined]="true" icon="pi pi-filter-slash" label="Clear" (click)="clear(dt)" />
+                            <p-button [outlined]="true" icon="pi pi-filter-slash" label="Clear" (onClick)="clear(dt)" />
                             <p-iconField iconPosition="left">
                                 <p-inputIcon>
                                     <i class="pi pi-search"></i>
@@ -271,7 +271,7 @@ export class CustomersDoc {
 >
     <ng-template pTemplate="caption">
         <div class="flex justify-content-between">
-            <p-button [outlined]="true" icon="pi pi-filter-slash" label="Clear" (click)="clear(dt)" />
+            <p-button [outlined]="true" icon="pi pi-filter-slash" label="Clear" (onClick)="clear(dt)" />
             <p-iconField iconPosition="left">
                 <p-inputIcon>
                     <i class="pi pi-search"></i>
@@ -433,7 +433,7 @@ export class CustomersDoc {
     >
     <ng-template pTemplate="caption">
         <div class="flex justify-content-between">
-            <p-button [outlined]="true" icon="pi pi-filter-slash" label="Clear" (click)="clear(dt)" />
+            <p-button [outlined]="true" icon="pi pi-filter-slash" label="Clear" (onClick)="clear(dt)" />
             <p-iconField iconPosition="left">
                 <p-inputIcon>
                     <i class="pi pi-search"></i>
diff --git a/src/app/showcase/doc/table/exportdoc.ts b/src/app/showcase/doc/table/exportdoc.ts
index d066856a8e7..87ed46635f9 100644
--- a/src/app/showcase/doc/table/exportdoc.ts
+++ b/src/app/showcase/doc/table/exportdoc.ts
@@ -24,7 +24,7 @@ interface ExportColumn {
                 <p-table #dt [columns]="cols" [value]="products" selectionMode="multiple" [(selection)]="selectedProducts" [exportHeader]="'customExportHeader'" [tableStyle]="{ 'min-width': '50rem' }">
                     <ng-template pTemplate="caption">
                         <div style="text-align: left">
-                            <p-button icon="pi pi-external-link" label="Export" (click)="dt.exportCSV()" />
+                            <p-button icon="pi pi-external-link" label="Export" (onClick)="dt.exportCSV()" />
                         </div>
                     </ng-template>
                     <ng-template pTemplate="header" let-columns>
@@ -91,7 +91,7 @@ export class ExportDoc {
                 <p-button 
                     icon="pi pi-external-link" 
                     label="Export" 
-                    (click)="dt.exportCSV()" />
+                    (onClick)="dt.exportCSV()" />
             </div>
         </ng-template>
         <ng-template pTemplate="header" let-columns>
@@ -123,7 +123,7 @@ export class ExportDoc {
                     <p-button 
                         icon="pi pi-external-link" 
                         label="Export" 
-                        (click)="dt.exportCSV()" />
+                        (onClick)="dt.exportCSV()" />
                 </div>
             </ng-template>
             <ng-template pTemplate="header" let-columns>
diff --git a/src/app/showcase/doc/table/filteradvanceddoc.ts b/src/app/showcase/doc/table/filteradvanceddoc.ts
index d550da02d4e..c0913064dc9 100644
--- a/src/app/showcase/doc/table/filteradvanceddoc.ts
+++ b/src/app/showcase/doc/table/filteradvanceddoc.ts
@@ -14,7 +14,7 @@ import { CustomerService } from '../../service/customerservice';
                 <p-table #dt1 [value]="customers" dataKey="id" [rows]="10" [rowsPerPageOptions]="[10, 25, 50]" [loading]="loading" [paginator]="true" [globalFilterFields]="['name', 'country.name', 'representative.name', 'status']">
                     <ng-template pTemplate="caption">
                         <div class="flex">
-                            <p-button label="Clear" [outlined]="true" icon="pi pi-filter-slash" (click)="clear(dt1)" />
+                            <p-button label="Clear" [outlined]="true" icon="pi pi-filter-slash" (onClick)="clear(dt1)" />
                             <span class="p-input-icon-left ml-auto">
                                 <i class="pi pi-search"></i>
                                 <input pInputText type="text" [(ngModel)]="searchValue" (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
@@ -233,7 +233,7 @@ export class FilterAdvancedDoc {
 >
     <ng-template pTemplate="caption">
         <div class="flex">
-            <p-button label="Clear" [outlined]="true" icon="pi pi-filter-slash" (click)="clear(dt1)" />
+            <p-button label="Clear" [outlined]="true" icon="pi pi-filter-slash" (onClick)="clear(dt1)" />
             <span class="p-input-icon-left ml-auto">
                 <i class="pi pi-search"></i>
                 <input pInputText type="text" [(ngModel)]="searchValue" (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
@@ -373,7 +373,7 @@ export class FilterAdvancedDoc {
         >
         <ng-template pTemplate="caption">
             <div class="flex">
-                <p-button label="Clear" [outlined]="true" icon="pi pi-filter-slash" (click)="clear(dt1)" />
+                <p-button label="Clear" [outlined]="true" icon="pi pi-filter-slash" (onClick)="clear(dt1)" />
                 <span class="p-input-icon-left ml-auto">
                     <i class="pi pi-search"></i>
                     <input pInputText type="text" [(ngModel)]="searchValue" (input)="dt1.filterGlobal($event.target.value, 'contains')" placeholder="Search keyword" />
diff --git a/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts b/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts
index 0d55200c065..c3d7c37a531 100644
--- a/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts
+++ b/src/app/showcase/doc/table/paginatorprogrammaticdoc.ts
@@ -12,9 +12,9 @@ import { CustomerService } from '@service/customerservice';
         <p-deferred-demo (load)="loadDemoData()">
             <div class="card">
                 <div class="mb-3 flex gap-1">
-                    <p-button type="button" icon="pi pi-chevron-left" (click)="prev()" [disabled]="isFirstPage()" styleClass="p-button-text" />
-                    <p-button type="button" icon="pi pi-refresh" (click)="reset()" styleClass="p-button-text" />
-                    <p-button type="button" icon="pi pi-chevron-right" (click)="next()" [disabled]="isLastPage()" styleClass="p-button-text" />
+                    <p-button type="button" icon="pi pi-chevron-left" (onClick)="prev()" [disabled]="isFirstPage()" styleClass="p-button-text" />
+                    <p-button type="button" icon="pi pi-refresh" (onClick)="reset()" styleClass="p-button-text" />
+                    <p-button type="button" icon="pi pi-chevron-right" (onClick)="next()" [disabled]="isLastPage()" styleClass="p-button-text" />
                 </div>
                 <p-table
                     [value]="customers"
@@ -99,18 +99,18 @@ export class PaginatorProgrammaticDoc {
     <p-button 
         type="button" 
         icon="pi pi-chevron-left" 
-        (click)="prev()" 
+        (onClick)="prev()" 
         [disabled]="isFirstPage()" 
         styleClass="p-button-text" />
     <p-button 
         type="button" 
         icon="pi pi-refresh" 
-        (click)="reset()" 
+        (onClick)="reset()" 
         styleClass="p-button-text" />
     <p-button 
         type="button" 
         icon="pi pi-chevron-right" 
-        (click)="next()" 
+        (onClick)="next()" 
         [disabled]="isLastPage()" 
         styleClass="p-button-text" />
 </div>
@@ -152,18 +152,18 @@ export class PaginatorProgrammaticDoc {
     <p-button 
         type="button" 
         icon="pi pi-chevron-left" 
-        (click)="prev()" 
+        (onClick)="prev()" 
         [disabled]="isFirstPage()" 
         styleClass="p-button-text" />
     <p-button 
         type="button"
         icon="pi pi-refresh" 
-        (click)="reset()" 
+        (onClick)="reset()" 
         styleClass="p-button-text" />
     <p-button 
         type="button" 
         icon="pi pi-chevron-right" 
-        (click)="next()" 
+        (onClick)="next()" 
         [disabled]="isLastPage()" 
         styleClass="p-button-text" />
 </div>
diff --git a/src/app/showcase/doc/table/productsdoc.ts b/src/app/showcase/doc/table/productsdoc.ts
index 91cfb7043e8..c191b98e720 100644
--- a/src/app/showcase/doc/table/productsdoc.ts
+++ b/src/app/showcase/doc/table/productsdoc.ts
@@ -14,8 +14,8 @@ import { ProductService } from '@service/productservice';
                 <p-toast />
                 <p-toolbar styleClass="mb-4 gap-2">
                     <ng-template pTemplate="left">
-                        <p-button pRipple severity="success" label="New" icon="pi pi-plus" class="mr-2" (click)="openNew()" />
-                        <p-button pRipple severity="danger" label="Delete" icon="pi pi-trash" (click)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length" />
+                        <p-button pRipple severity="success" label="New" icon="pi pi-plus" class="mr-2" (onClick)="openNew()" />
+                        <p-button pRipple severity="danger" label="Delete" icon="pi pi-trash" (onClick)="deleteSelectedProducts()" [disabled]="!selectedProducts || !selectedProducts.length" />
                     </ng-template>
 
                     <ng-template pTemplate="right">
@@ -74,8 +74,8 @@ import { ProductService } from '@service/productservice';
                                 <p-tag [value]="product.inventoryStatus" [severity]="getSeverity(product.inventoryStatus)" />
                             </td>
                             <td>
-                                <p-button pRipple icon="pi pi-pencil" class="mr-2" [rounded]="true" [outlined]="true" severity="success" (click)="editProduct(product)" />
-                                <p-button pRipple icon="pi pi-trash" severity="danger" [rounded]="true" [outlined]="true" (click)="deleteProduct(product)" />
+                                <p-button pRipple icon="pi pi-pencil" class="mr-2" [rounded]="true" [outlined]="true" severity="success" (onClick)="editProduct(product)" />
+                                <p-button pRipple icon="pi pi-trash" severity="danger" [rounded]="true" [outlined]="true" (onClick)="deleteProduct(product)" />
                             </td>
                         </tr>
                     </ng-template>
@@ -144,8 +144,8 @@ import { ProductService } from '@service/productservice';
                     </ng-template>
 
                     <ng-template pTemplate="footer">
-                        <p-button pRipple label="Cancel" icon="pi pi-times" [text]="true" (click)="hideDialog()" />
-                        <p-button pRipple label="Save" icon="pi pi-check" [text]="true" (click)="saveProduct()" />
+                        <p-button pRipple label="Cancel" icon="pi pi-times" [text]="true" (onClick)="hideDialog()" />
+                        <p-button pRipple label="Save" icon="pi pi-check" [text]="true" (onClick)="saveProduct()" />
                     </ng-template>
                 </p-dialog>
 
@@ -293,13 +293,13 @@ export class ProductsDoc {
             label="New" 
             icon="pi pi-plus" 
             class="mr-2" 
-            (click)="openNew()" />
+            (onClick)="openNew()" />
         <p-button 
             pRipple
             severity="danger" 
             label="Delete" 
             icon="pi pi-trash" 
-            (click)="deleteSelectedProducts()" 
+            (onClick)="deleteSelectedProducts()" 
             [disabled]="!selectedProducts || !selectedProducts.length" />
     </ng-template>
 
@@ -404,14 +404,14 @@ export class ProductsDoc {
                     [rounded]="true" 
                     [outlined]="true" 
                     severity="success" 
-                    (click)="editProduct(product)" />
+                    (onClick)="editProduct(product)" />
                 <p-button 
                     pRipple 
                     icon="pi pi-trash" 
                     severity="danger" 
                     [rounded]="true" 
                     [outlined]="true" 
-                    (click)="deleteProduct(product)" />
+                    (onClick)="deleteProduct(product)" />
             </td>
         </tr>
     </ng-template>
@@ -431,13 +431,13 @@ export class ProductsDoc {
                 label="New" 
                 icon="pi pi-plus" 
                 class="mr-2" 
-                (click)="openNew()" />
+                (onClick)="openNew()" />
             <p-button 
                 pRipple 
                 severity="danger" 
                 label="Delete" 
                 icon="pi pi-trash" 
-                (click)="deleteSelectedProducts()" 
+                (onClick)="deleteSelectedProducts()" 
                 [disabled]="!selectedProducts || !selectedProducts.length" />
         </ng-template>
 
@@ -549,14 +549,14 @@ export class ProductsDoc {
                         [rounded]="true" 
                         [outlined]="true" 
                         severity="success" 
-                        (click)="editProduct(product)" />
+                        (onClick)="editProduct(product)" />
                     <p-button 
                         pRipple 
                         icon="pi pi-trash" 
                         severity="danger" 
                         [rounded]="true" 
                         [outlined]="true" 
-                        (click)="deleteProduct(product)" />
+                        (onClick)="deleteProduct(product)" />
                 </td>
             </tr>
         </ng-template>
@@ -686,13 +686,13 @@ export class ProductsDoc {
                     label="Cancel" 
                     icon="pi pi-times" 
                     [text]="true" 
-                    (click)="hideDialog()" />
+                    (onClick)="hideDialog()" />
                 <p-button 
                     pRipple 
                     label="Save" 
                     icon="pi pi-check" 
                     [text]="true" 
-                    (click)="saveProduct()" />
+                    (onClick)="saveProduct()" />
             </ng-template>
     </p-dialog>
 
diff --git a/src/app/showcase/doc/tabmenu/controlleddoc.ts b/src/app/showcase/doc/tabmenu/controlleddoc.ts
index 248f1a057c3..45f614a2c61 100644
--- a/src/app/showcase/doc/tabmenu/controlleddoc.ts
+++ b/src/app/showcase/doc/tabmenu/controlleddoc.ts
@@ -10,9 +10,9 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card">
             <div class="flex mb-2 gap-2 justify-content-end">
-                <p-button (click)="activeItem = items[0]" [rounded]="true" label="1" styleClass="w-2rem h-2rem p-0" [outlined]="activeItem !== items[0]" />
-                <p-button (click)="activeItem = items[1]" [rounded]="true" label="2" styleClass="w-2rem h-2rem p-0" [outlined]="activeItem !== items[1]" />
-                <p-button (click)="activeItem = items[2]" [rounded]="true" label="3" styleClass="w-2rem h-2rem p-0" [outlined]="activeItem !== items[2]" />
+                <p-button (onClick)="activeItem = items[0]" [rounded]="true" label="1" styleClass="w-2rem h-2rem p-0" [outlined]="activeItem !== items[0]" />
+                <p-button (onClick)="activeItem = items[1]" [rounded]="true" label="2" styleClass="w-2rem h-2rem p-0" [outlined]="activeItem !== items[1]" />
+                <p-button (onClick)="activeItem = items[2]" [rounded]="true" label="3" styleClass="w-2rem h-2rem p-0" [outlined]="activeItem !== items[2]" />
             </div>
             <p-tabMenu [model]="items" [activeItem]="activeItem" (activeItemChange)="onActiveItemChange($event)" />
         </div>
@@ -41,19 +41,19 @@ export class ControlledDoc implements OnInit {
     code: Code = {
         basic: `<div class="flex mb-2 gap-2 justify-content-end">
     <p-button 
-        (click)="activeItem = items[0]" 
+        (onClick)="activeItem = items[0]" 
         [rounded]="true" 
         label="1" 
         styleClass="w-2rem h-2rem p-0" 
         [outlined]="activeItem !== items[0]" />
     <p-button 
-        (click)="activeItem = items[1]" 
+        (onClick)="activeItem = items[1]" 
         [rounded]="true" 
         label="2" 
         styleClass="w-2rem h-2rem p-0" 
         [outlined]="activeItem !== items[1]" />
     <p-button 
-        (click)="activeItem = items[2]" 
+        (onClick)="activeItem = items[2]" 
         [rounded]="true" 
         label="3" 
         styleClass="w-2rem h-2rem p-0" 
@@ -67,18 +67,18 @@ export class ControlledDoc implements OnInit {
         html: `<div class="card">
     <div class="flex mb-2 gap-2 justify-content-end">
         <p-button 
-            (click)="activeItem = items[0]" 
+            (onClick)="activeItem = items[0]" 
             [rounded]="true" label="1" 
             styleClass="w-2rem h-2rem p-0" 
             [outlined]="activeItem !== items[0]" />
         <p-button 
-            (click)="activeItem = items[1]" 
+            (onClick)="activeItem = items[1]" 
             [rounded]="true" 
             label="2" 
             styleClass="w-2rem h-2rem p-0" 
             [outlined]="activeItem !== items[1]" />
         <p-button 
-            (click)="activeItem = items[2]" 
+            (onClick)="activeItem = items[2]" 
             [rounded]="true" 
             label="3" 
             styleClass="w-2rem h-2rem p-0" 
diff --git a/src/app/showcase/doc/tabview/controlleddoc.ts b/src/app/showcase/doc/tabview/controlleddoc.ts
index 7bec4f129ff..4f4783c2937 100644
--- a/src/app/showcase/doc/tabview/controlleddoc.ts
+++ b/src/app/showcase/doc/tabview/controlleddoc.ts
@@ -9,9 +9,9 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card">
             <div class="flex mb-2 gap-2 justify-content-end">
-                <p-button (click)="activeIndex = 0" rounded="true" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 0" label="1" />
-                <p-button (click)="activeIndex = 1" rounded="true" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 1" label="2" />
-                <p-button (click)="activeIndex = 2" rounded="true" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 2" label="3" />
+                <p-button (onClick)="activeIndex = 0" rounded="true" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 0" label="1" />
+                <p-button (onClick)="activeIndex = 1" rounded="true" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 1" label="2" />
+                <p-button (onClick)="activeIndex = 2" rounded="true" styleClass="w-2rem h-2rem p-0" [outlined]="activeIndex !== 2" label="3" />
             </div>
             <p-tabView [(activeIndex)]="activeIndex">
                 <p-tabPanel header="Header I">
@@ -43,19 +43,19 @@ export class ControlledDoc {
     code: Code = {
         basic: `<div class="flex mb-2 gap-2 justify-content-end">
     <p-button 
-        (click)="activeIndex = 0" 
+        (onClick)="activeIndex = 0" 
         rounded="true" 
         styleClass="w-2rem h-2rem p-0" 
         [outlined]="activeIndex !== 0" 
         label="1" />
     <p-button 
-        (click)="activeIndex = 1" 
+        (onClick)="activeIndex = 1" 
         rounded="true" 
         styleClass="w-2rem h-2rem p-0" 
         [outlined]="activeIndex !== 1" 
         label="2" />
     <p-button 
-        (click)="activeIndex = 2" 
+        (onClick)="activeIndex = 2" 
         rounded="true"
         styleClass="w-2rem h-2rem p-0" 
         [outlined]="activeIndex !== 2" 
@@ -82,19 +82,19 @@ export class ControlledDoc {
         html: `<div class="card">
     <div class="flex mb-2 gap-2 justify-content-end">
         <p-button 
-            (click)="activeIndex = 0" 
+            (onClick)="activeIndex = 0" 
             rounded="true" 
             styleClass="w-2rem h-2rem p-0" 
             [outlined]="activeIndex !== 0" 
             label="1" />
         <p-button 
-            (click)="activeIndex = 1" 
+            (onClick)="activeIndex = 1" 
             rounded="true" 
             styleClass="w-2rem h-2rem p-0" 
             [outlined]="activeIndex !== 1" 
             label="2" />
         <p-button 
-            (click)="activeIndex = 2" 
+            (onClick)="activeIndex = 2" 
             rounded="true" 
             styleClass="w-2rem h-2rem p-0" 
             [outlined]="activeIndex !== 2" 
diff --git a/src/app/showcase/doc/tieredmenu/popupdoc.ts b/src/app/showcase/doc/tieredmenu/popupdoc.ts
index 358e7fa63e0..7f2d64c8d14 100644
--- a/src/app/showcase/doc/tieredmenu/popupdoc.ts
+++ b/src/app/showcase/doc/tieredmenu/popupdoc.ts
@@ -9,7 +9,7 @@ import { Code } from '@domain/code';
             <p>Popup mode is enabled by adding <i>popup</i> property and calling <i>toggle</i> method with an event of the target.</p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-button label="Toggle" (click)="menu.toggle($event)" />
+            <p-button label="Toggle" (onClick)="menu.toggle($event)" />
             <p-tieredMenu #menu [model]="items" [popup]="true" />
         </div>
         <app-code [code]="code" selector="tiered-menu-popup-demo"></app-code>
@@ -91,11 +91,11 @@ export class PopupDoc implements OnInit {
     }
 
     code: Code = {
-        basic: `<p-button label="Toggle" (click)="menu.toggle($event)" />
+        basic: `<p-button label="Toggle" (onClick)="menu.toggle($event)" />
 <p-tieredMenu #menu [model]="items" [popup]="true" />`,
 
         html: `<div class="card flex justify-content-center">
-    <p-button label="Toggle" (click)="menu.toggle($event)" />
+    <p-button label="Toggle" (onClick)="menu.toggle($event)" />
     <p-tieredMenu #menu [model]="items" [popup]="true" />
 </div>`,
 
diff --git a/src/app/showcase/doc/toast/animationdoc.ts b/src/app/showcase/doc/toast/animationdoc.ts
index 35bca011b12..efe08ccfe19 100644
--- a/src/app/showcase/doc/toast/animationdoc.ts
+++ b/src/app/showcase/doc/toast/animationdoc.ts
@@ -10,7 +10,7 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-toast [showTransformOptions]="'translateY(100%)'" [showTransitionOptions]="'1000ms'" [hideTransitionOptions]="'1000ms'" [showTransformOptions]="'translateX(100%)'" />
-            <p-button pRipple (click)="show()" label="Show" />
+            <p-button pRipple (onClick)="show()" label="Show" />
         </div>
         <app-code [code]="code" selector="toast-animation-demo"></app-code>
     `,
@@ -29,14 +29,14 @@ export class AnimationDoc {
     [showTransitionOptions]="'1000ms'" 
     [hideTransitionOptions]="'1000ms'" 
     [showTransformOptions]="'translateX(100%)'" />
-<p-button pRipple (click)="show()" label="Show" />`,
+<p-button pRipple (onClick)="show()" label="Show" />`,
         html: `<div class="card flex justify-content-center">
     <p-toast 
         [showTransformOptions]="'translateY(100%)'" 
         [showTransitionOptions]="'1000ms'" 
         [hideTransitionOptions]="'1000ms'" 
         [showTransformOptions]="'translateX(100%)'" />
-    <p-button pRipple (click)="show()" label="Show" />
+    <p-button pRipple (onClick)="show()" label="Show" />
 </div>`,
         typescript: `import { Component } from '@angular/core';
 import { MessageService } from 'primeng/api';
diff --git a/src/app/showcase/doc/toast/basicdoc.ts b/src/app/showcase/doc/toast/basicdoc.ts
index 2ba76023ea2..e4bd9b7d8f9 100644
--- a/src/app/showcase/doc/toast/basicdoc.ts
+++ b/src/app/showcase/doc/toast/basicdoc.ts
@@ -13,7 +13,7 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-toast />
-            <p-button pRipple (click)="show()" label="Show" />
+            <p-button pRipple (onClick)="show()" label="Show" />
         </div>
         <app-code [code]="code" selector="toast-basic-demo"></app-code>
     `,
@@ -28,10 +28,10 @@ export class BasicDoc {
 
     code: Code = {
         basic: `<p-toast />
-<p-button pRipple (click)="show()" label="Show" />`,
+<p-button pRipple (onClick)="show()" label="Show" />`,
         html: `<div class="card flex justify-content-center">
     <p-toast />
-    <p-button pRipple (click)="show()" label="Show" />
+    <p-button pRipple (onClick)="show()" label="Show" />
 </div>`,
         typescript: `import { Component } from '@angular/core';
 import { MessageService } from 'primeng/api';
diff --git a/src/app/showcase/doc/toast/cleardoc.ts b/src/app/showcase/doc/toast/cleardoc.ts
index 3cf36209fb4..87de728aa34 100644
--- a/src/app/showcase/doc/toast/cleardoc.ts
+++ b/src/app/showcase/doc/toast/cleardoc.ts
@@ -13,8 +13,8 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center gap-2">
             <p-toast key="myKey" />
-            <p-button pRipple (click)="show()" label="Show" />
-            <p-button pRipple (click)="clear()" label="Clear" severity="secondary" />
+            <p-button pRipple (onClick)="show()" label="Show" />
+            <p-button pRipple (onClick)="clear()" label="Clear" severity="secondary" />
         </div>
         <app-code [code]="code" selector="toast-clear-demo"></app-code>
     `,
@@ -35,22 +35,22 @@ export class ClearDoc {
         basic: `<p-toast key="myKey" />
 <p-button 
     pRipple 
-    (click)="show()" 
+    (onClick)="show()" 
     label="Show" />
 <p-button 
     pRipple 
-    (click)="clear()" 
+    (onClick)="clear()" 
     label="Clear" 
     severity="secondary" />`,
         html: `<div class="card flex justify-content-center gap-2">
     <p-toast key="myKey" />
     <p-button 
         pRipple 
-        (click)="show()" 
+        (onClick)="show()" 
         label="Show" />
     <p-button 
         pRipple 
-        (click)="clear()" 
+        (onClick)="clear()" 
         label="Clear" 
         severity="secondary" />
 </div>`,
diff --git a/src/app/showcase/doc/toast/headlessdoc.ts b/src/app/showcase/doc/toast/headlessdoc.ts
index a42243fafbc..a95255d6efa 100644
--- a/src/app/showcase/doc/toast/headlessdoc.ts
+++ b/src/app/showcase/doc/toast/headlessdoc.ts
@@ -21,14 +21,14 @@ import { Code } from '@domain/code';
                                 <label class="text-right text-xs text-white">{{ progress }}% uploaded...</label>
                             </div>
                             <div class="flex gap-3 mb-3">
-                                <p-button label="Another Upload?" [text]="true" styleClass="p-0" (click)="closeFn($event)" />
-                                <p-button label="Cancel" [text]="true" styleClass="text-white p-0" (click)="closeFn($event)" />
+                                <p-button label="Another Upload?" [text]="true" styleClass="p-0" (onClick)="closeFn($event)" />
+                                <p-button label="Cancel" [text]="true" styleClass="text-white p-0" (onClick)="closeFn($event)" />
                             </div>
                         </div>
                     </section>
                 </ng-template>
             </p-toast>
-            <p-button pRipple (click)="showConfirm()" label="Confirm" />
+            <p-button pRipple (onClick)="showConfirm()" label="Confirm" />
         </div>
         <app-code [code]="code" selector="toast-headless-demo"></app-code>
     `,
@@ -104,18 +104,18 @@ export class HeadlessDoc {
                             label="Another Upload?" 
                             [text]="true"
                             styleClass="p-0" 
-                            (click)="closeFn($event)" />
+                            (onClick)="closeFn($event)" />
                         <p-button 
                             label="Cancel" 
                             [text]="true"
                             styleClass="text-white p-0" 
-                            (click)="closeFn($event)" />
+                            (onClick)="closeFn($event)" />
                     </div>
                 </div>
             </section>
         </ng-template>
 </p-toast>
-<p-button pRipple (click)="showConfirm()" label="Confirm" />`,
+<p-button pRipple (onClick)="showConfirm()" label="Confirm" />`,
         html: `<div class="card flex justify-content-center">
     <p-toast 
         position="top-center" 
@@ -146,18 +146,18 @@ export class HeadlessDoc {
                                 label="Another Upload?" 
                                 [text]="true" 
                                 styleClass="p-0" 
-                                (click)="closeFn($event)" />
+                                (onClick)="closeFn($event)" />
                             <p-button 
                                 label="Cancel" 
                                 [text]="true" 
                                 styleClass="text-white p-0" 
-                                (click)="closeFn($event)" />
+                                (onClick)="closeFn($event)" />
                         </div>
                     </div>
                 </section>
             </ng-template>
     </p-toast>
-    <p-button pRipple (click)="showConfirm()" label="Confirm" />
+    <p-button pRipple (onClick)="showConfirm()" label="Confirm" />
 </div>`,
         typescript: `import { ChangeDetectorRef, Component } from '@angular/core';
 import { MessageService } from 'primeng/api';
diff --git a/src/app/showcase/doc/toast/lifedoc.ts b/src/app/showcase/doc/toast/lifedoc.ts
index c42256eac22..f1098b30c80 100644
--- a/src/app/showcase/doc/toast/lifedoc.ts
+++ b/src/app/showcase/doc/toast/lifedoc.ts
@@ -10,8 +10,8 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center gap-2">
             <p-toast [life]="10000" />
-            <p-button pRipple (click)="showLife()" label="Show Life" />
-            <p-button pRipple (click)="showLifeLong()" label="Show Life Long" />
+            <p-button pRipple (onClick)="showLife()" label="Show Life" />
+            <p-button pRipple (onClick)="showLifeLong()" label="Show Life Long" />
         </div>
         <app-code [code]="code" selector="toast-life-demo"></app-code>
     `,
@@ -32,21 +32,21 @@ export class LifeDoc {
         basic: `<p-toast [life]="10000" />
 <p-button 
     pRipple 
-    (click)="showLife()" 
+    (onClick)="showLife()" 
     label="Show Life" />
 <p-button 
     pRipple 
-    (click)="showLifeLong()" 
+    (onClick)="showLifeLong()" 
     label="Show Life Long" />`,
         html: `<div class="card flex justify-content-center">
     <p-toast [life]="10000" />
     <p-button 
         pRipple 
-        (click)="showLife()" 
+        (onClick)="showLife()" 
         label="Show Life" />
     <p-button
         pRipple 
-        (click)="showLifeLong()" 
+        (onClick)="showLifeLong()" 
         label="Show Life Long" />
 </div>`,
         typescript: `import { Component } from '@angular/core';
diff --git a/src/app/showcase/doc/toast/multipledoc.ts b/src/app/showcase/doc/toast/multipledoc.ts
index e65b3dd9cf5..0822d5589fb 100644
--- a/src/app/showcase/doc/toast/multipledoc.ts
+++ b/src/app/showcase/doc/toast/multipledoc.ts
@@ -10,7 +10,7 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-toast />
-            <p-button pRipple (click)="show()" label="Multiple" severity="warning" />
+            <p-button pRipple (onClick)="show()" label="Multiple" severity="warning" />
         </div>
         <app-code [code]="code" selector="toast-multiple-demo"></app-code>
     `,
@@ -32,14 +32,14 @@ export class MultipleDoc {
         basic: `<p-toast />
 <p-button
     pRipple 
-    (click)="show()" 
+    (onClick)="show()" 
     label="Multiple" 
     severity="warning" />`,
         html: `<div class="card flex justify-content-center">
     <p-toast />
     <p-button 
         pRipple 
-        (click)="show()" 
+        (onClick)="show()" 
         label="Multiple" 
         severity="warning" />
 </div>`,
diff --git a/src/app/showcase/doc/toast/positiondoc.ts b/src/app/showcase/doc/toast/positiondoc.ts
index 3d424fbf372..43b8621a046 100644
--- a/src/app/showcase/doc/toast/positiondoc.ts
+++ b/src/app/showcase/doc/toast/positiondoc.ts
@@ -13,9 +13,9 @@ import { Code } from '@domain/code';
             <p-toast position="bottom-left" key="bl" />
             <p-toast position="bottom-right" key="br" />
 
-            <p-button pRipple (click)="showTopLeft()" label="Top Left" />
-            <p-button pRipple (click)="showBottomLeft()" label="Bottom Left" severity="warning" />
-            <p-button pRipple (click)="showBottomRight()" label="Bottom Right" severity="help" />
+            <p-button pRipple (onClick)="showTopLeft()" label="Top Left" />
+            <p-button pRipple (onClick)="showBottomLeft()" label="Bottom Left" severity="warning" />
+            <p-button pRipple (onClick)="showBottomRight()" label="Bottom Right" severity="help" />
         </div>
         <app-code [code]="code" selector="toast-position-demo"></app-code>
     `,
@@ -43,16 +43,16 @@ export class PositionDoc {
 
 <p-button 
     pRipple 
-    (click)="showTopLeft()" 
+    (onClick)="showTopLeft()" 
     label="Top Left" />
 <p-button 
     pRipple 
-    (click)="showBottomLeft()" 
+    (onClick)="showBottomLeft()" 
     label="Bottom Left" 
     severity="warning" />
 <p-button 
     pRipple 
-    (click)="showBottomRight()" 
+    (onClick)="showBottomRight()" 
     label="Bottom Right" 
     severity="help" />`,
 
@@ -63,16 +63,16 @@ export class PositionDoc {
 
     <p-button 
         pRipple 
-        (click)="showTopLeft()" 
+        (onClick)="showTopLeft()" 
         label="Top Left" />
     <p-button 
         pRipple 
-        (click)="showBottomLeft()" 
+        (onClick)="showBottomLeft()" 
         label="Bottom Left" 
         severity="warning" />
     <p-button 
         pRipple 
-        (click)="showBottomRight()" 
+        (onClick)="showBottomRight()" 
         label="Bottom Right" 
         severity="help" />
 </div>`,
diff --git a/src/app/showcase/doc/toast/responsivedoc.ts b/src/app/showcase/doc/toast/responsivedoc.ts
index 828232c234a..536369bc939 100644
--- a/src/app/showcase/doc/toast/responsivedoc.ts
+++ b/src/app/showcase/doc/toast/responsivedoc.ts
@@ -13,7 +13,7 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-toast [breakpoints]="{ '920px': { width: '100%', right: '0', left: '0' } }" />
-            <p-button pRipple (click)="show()" label="Show" />
+            <p-button pRipple (onClick)="show()" label="Show" />
         </div>
         <app-code [code]="code" selector="toast-responsive-demo"></app-code>
     `,
@@ -28,10 +28,10 @@ export class ResponsiveDoc {
 
     code: Code = {
         basic: `<p-toast [breakpoints]="{ '920px': { width: '100%', right: '0', left: '0' } }" />
-<p-button pRipple (click)="show()" label="Show" />`,
+<p-button pRipple (onClick)="show()" label="Show" />`,
         html: `<div class="card flex justify-content-center">
     <p-toast [breakpoints]="{ '920px': { width: '100%', right: '0', left: '0' } }" />
-    <p-button pRipple (click)="show()" label="Show" />
+    <p-button pRipple (onClick)="show()" label="Show" />
 </div>`,
         typescript: `import { Component } from '@angular/core';
 import { MessageService } from 'primeng/api';
diff --git a/src/app/showcase/doc/toast/severitydoc.ts b/src/app/showcase/doc/toast/severitydoc.ts
index d1b64136a8e..3f9742701d9 100644
--- a/src/app/showcase/doc/toast/severitydoc.ts
+++ b/src/app/showcase/doc/toast/severitydoc.ts
@@ -13,12 +13,12 @@ import { Code } from '@domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center gap-2">
             <p-toast />
-            <p-button type="button" pRipple (click)="showSuccess()" label="Success" severity="success" />
-            <p-button type="button" pRipple (click)="showInfo()" label="Info" severity="info" />
-            <p-button type="button" pRipple (click)="showWarn()" label="Warn" severity="warning" />
-            <p-button type="button" pRipple (click)="showError()" label="Error" severity="danger" />
-            <p-button type="button" pRipple (click)="showSecondary()" label="Secondary" severity="secondary" />
-            <p-button type="button" pRipple (click)="showContrast()" label="Contrast" severity="contrast" />
+            <p-button type="button" pRipple (onClick)="showSuccess()" label="Success" severity="success" />
+            <p-button type="button" pRipple (onClick)="showInfo()" label="Info" severity="info" />
+            <p-button type="button" pRipple (onClick)="showWarn()" label="Warn" severity="warning" />
+            <p-button type="button" pRipple (onClick)="showError()" label="Error" severity="danger" />
+            <p-button type="button" pRipple (onClick)="showSecondary()" label="Secondary" severity="secondary" />
+            <p-button type="button" pRipple (onClick)="showContrast()" label="Contrast" severity="contrast" />
         </div>
         <app-code [code]="code" selector="toast-severity-demo"></app-code>
     `,
@@ -56,37 +56,37 @@ export class SeverityDoc {
 <p-button 
     type="button" 
     pRipple 
-    (click)="showSuccess()" 
+    (onClick)="showSuccess()" 
     label="Success" 
     severity="success" />
 <p-button 
     type="button"
     pRipple 
-    (click)="showInfo()" 
+    (onClick)="showInfo()" 
     label="Info" 
     severity="info" />
 <p-button 
     type="button" 
     pRipple 
-    (click)="showWarn()" 
+    (onClick)="showWarn()" 
     label="Warn" 
     severity="warning" />
 <p-button 
     type="button" 
     pRipple 
-    (click)="showError()" 
+    (onClick)="showError()" 
     label="Error" 
     severity="danger" />
 <p-button 
     type="button" 
     pRipple 
-    (click)="showSecondary()" 
+    (onClick)="showSecondary()" 
     label="Secondary" 
     severity="secondary" />
 <p-button 
     type="button" 
     pRipple 
-    (click)="showContrast()" 
+    (onClick)="showContrast()" 
     label="Contrast" 
     severity="contrast" />`,
         html: `<div class="card flex justify-content-center gap-2">
@@ -94,37 +94,37 @@ export class SeverityDoc {
     <p-button 
         type="button" 
         pRipple 
-        (click)="showSuccess()" 
+        (onClick)="showSuccess()" 
         label="Success" 
         severity="success" />
     <p-button 
         type="button"
         pRipple 
-        (click)="showInfo()" 
+        (onClick)="showInfo()" 
         label="Info" 
         severity="info" />
     <p-button 
         type="button" 
         pRipple 
-        (click)="showWarn()" 
+        (onClick)="showWarn()" 
         label="Warn" 
         severity="warning"  />
     <p-button 
         type="button" 
         pRipple 
-        (click)="showError()" 
+        (onClick)="showError()" 
         label="Error" 
         severity="danger" />
     <p-button 
         type="button" 
         pRipple 
-        (click)="showSecondary()" 
+        (onClick)="showSecondary()" 
         label="Secondary" 
         severity="secondary" />
     <p-button 
         type="button" 
         pRipple 
-        (click)="showContrast()" 
+        (onClick)="showContrast()" 
         label="Contrast" 
         severity="contrast" />
 </div>`,
diff --git a/src/app/showcase/doc/toast/stickydoc.ts b/src/app/showcase/doc/toast/stickydoc.ts
index 3056c301265..434fea5d1aa 100644
--- a/src/app/showcase/doc/toast/stickydoc.ts
+++ b/src/app/showcase/doc/toast/stickydoc.ts
@@ -11,8 +11,8 @@ import { Code } from '@domain/code';
         <div class="card flex justify-content-center">
             <p-toast />
             <div class="flex flex-wrap gap-2">
-                <p-button pRipple (click)="show()" severity="success" label="Sticky" />
-                <p-button pRipple (click)="clear()" label="Clear" />
+                <p-button pRipple (onClick)="show()" severity="success" label="Sticky" />
+                <p-button pRipple (onClick)="clear()" label="Clear" />
             </div>
         </div>
         <app-code [code]="code" selector="toast-sticky-demo"></app-code>
@@ -35,12 +35,12 @@ export class StickyDoc {
 <div class="flex flex-wrap gap-2">
     <p-button 
         pRipple 
-        (click)="show()" 
+        (onClick)="show()" 
         severity="success" 
         label="Sticky" />
     <p-button 
         pRipple 
-        (click)="clear()" 
+        (onClick)="clear()" 
         label="Clear" />
 </div>`,
         html: `<div class="card flex justify-content-center">
@@ -48,12 +48,12 @@ export class StickyDoc {
     <div class="flex flex-wrap gap-2">
         <p-button 
             pRipple 
-            (click)="show()" 
+            (onClick)="show()" 
             severity="success" 
             label="Sticky" />
         <p-button 
             pRipple 
-            (click)="clear()" 
+            (onClick)="clear()" 
             label="Clear" />
     </div>
 </div>`,
diff --git a/src/app/showcase/doc/toast/targetdoc.ts b/src/app/showcase/doc/toast/targetdoc.ts
index 4deb9075d9f..881253f2e7e 100644
--- a/src/app/showcase/doc/toast/targetdoc.ts
+++ b/src/app/showcase/doc/toast/targetdoc.ts
@@ -11,8 +11,8 @@ import { Code } from '@domain/code';
         <div class="card flex justify-content-center gap-2">
             <p-toast key="toast1" />
             <p-toast key="toast2" />
-            <p-button pRipple (click)="showToast1()" label="Show Success" />
-            <p-button pRipple (click)="showToast2()" label="Show Warning" severity="warning" />
+            <p-button pRipple (onClick)="showToast1()" label="Show Success" />
+            <p-button pRipple (onClick)="showToast2()" label="Show Warning" severity="warning" />
         </div>
         <app-code [code]="code" selector="toast-target-demo"></app-code>
     `,
@@ -36,11 +36,11 @@ export class TargetDoc {
 <p-toast key="toast2" />
 <p-button 
     pRipple 
-    (click)="showToast1()" 
+    (onClick)="showToast1()" 
     label="Show Success" />
 <p-button 
     pRipple 
-    (click)="showToast2()" 
+    (onClick)="showToast2()" 
     label="Show Warning" 
     severity="warning" />`,
         html: `<div class="card flex justify-content-center gap-2">
@@ -48,11 +48,11 @@ export class TargetDoc {
     <p-toast key="toast2" />
     <p-button 
         pRipple 
-        (click)="showToast1()" 
+        (onClick)="showToast1()" 
         label="Show Success" />
     <p-button 
         pRipple 
-        (click)="showToast2()" 
+        (onClick)="showToast2()" 
         label="Show Warning" 
         severity="warning" />
 </div>`,
diff --git a/src/app/showcase/doc/toast/templatedoc.ts b/src/app/showcase/doc/toast/templatedoc.ts
index c74b9cf5f58..622b7b6d542 100644
--- a/src/app/showcase/doc/toast/templatedoc.ts
+++ b/src/app/showcase/doc/toast/templatedoc.ts
@@ -17,11 +17,11 @@ import { Code } from '@domain/code';
                             <span class="font-bold text-900">Amy Elsner</span>
                         </div>
                         <div class="font-medium text-lg my-3 text-900">{{ message.summary }}</div>
-                        <p-button size="small" label="Reply" (click)="onConfirm()" />
+                        <p-button size="small" label="Reply" (onClick)="onConfirm()" />
                     </div>
                 </ng-template>
             </p-toast>
-            <p-button pRipple (click)="showConfirm()" label="View" />
+            <p-button pRipple (onClick)="showConfirm()" label="View" />
         </div>
         <app-code [code]="code" selector="toast-template-demo"></app-code>
     `,
@@ -68,11 +68,11 @@ export class TemplateDoc {
                 <div class="font-medium text-lg my-3 text-900">
                     {{ message.summary }}
                 </div>
-                <p-button size="small" label="Reply" (click)="onConfirm()" />
+                <p-button size="small" label="Reply" (onClick)="onConfirm()" />
             </div>
         </ng-template>
 </p-toast>
-<p-button pRipple (click)="showConfirm()" label="View" />`,
+<p-button pRipple (onClick)="showConfirm()" label="View" />`,
         html: `<div class="card flex justify-content-center">
     <p-toast 
         position="bottom-center" 
@@ -92,11 +92,11 @@ export class TemplateDoc {
                     <div class="font-medium text-lg my-3 text-900">
                         {{ message.summary }}
                     </div>
-                    <p-button size="small" label="Reply" (click)="onConfirm()" />
+                    <p-button size="small" label="Reply" (onClick)="onConfirm()" />
                 </div>
             </ng-template>
     </p-toast>
-    <p-button pRipple (click)="showConfirm()" label="View" />
+    <p-button pRipple (onClick)="showConfirm()" label="View" />
 </div>`,
         typescript: `import { Component } from '@angular/core';
 import { MessageService } from 'primeng/api';
diff --git a/src/app/showcase/doc/tree/controlleddoc.ts b/src/app/showcase/doc/tree/controlleddoc.ts
index afc13c05f55..78ad1f32cff 100644
--- a/src/app/showcase/doc/tree/controlleddoc.ts
+++ b/src/app/showcase/doc/tree/controlleddoc.ts
@@ -11,8 +11,8 @@ import { NodeService } from '@service/nodeservice';
         </app-docsectiontext>
         <div class="card flex flex-column align-items-center justify-content-center">
             <div class="mb-3">
-                <p-button icon="pi pi-plus" label="Expand all" (click)="expandAll()" class="mr-2" />
-                <p-button icon="pi pi-minus" label="Collapse all" (click)="collapseAll()" />
+                <p-button icon="pi pi-plus" label="Expand all" (onClick)="expandAll()" class="mr-2" />
+                <p-button icon="pi pi-minus" label="Collapse all" (onClick)="collapseAll()" />
             </div>
             <p-tree [value]="files" class="w-full md:w-30rem" />
         </div>
@@ -54,12 +54,12 @@ export class ControlledDoc implements OnInit {
     <p-button 
         icon="pi pi-plus" 
         label="Expand all" 
-        (click)="expandAll()" 
+        (onClick)="expandAll()" 
         class="mr-2" />
     <p-button 
         icon="pi pi-minus" 
         label="Collapse all" 
-        (click)="collapseAll()" />
+        (onClick)="collapseAll()" />
 </div>
 <p-tree [value]="files" class="w-full md:w-30rem" />`,
 
@@ -68,12 +68,12 @@ export class ControlledDoc implements OnInit {
         <p-button 
             icon="pi pi-plus" 
             label="Expand all" 
-            (click)="expandAll()" 
+            (onClick)="expandAll()" 
             class="mr-2" />
         <p-button
             icon="pi pi-minus" 
             label="Collapse all" 
-            (click)="collapseAll()" />
+            (onClick)="collapseAll()" />
     </div>
     <p-tree [value]="files" class="w-full md:w-30rem" />
 </div>`,
diff --git a/src/app/showcase/doc/treetable/controlleddoc.ts b/src/app/showcase/doc/treetable/controlleddoc.ts
index 97ca1cb64f8..27b3327bc2d 100644
--- a/src/app/showcase/doc/treetable/controlleddoc.ts
+++ b/src/app/showcase/doc/treetable/controlleddoc.ts
@@ -9,7 +9,7 @@ import { NodeService } from '@service/nodeservice';
             <p>Expansion state is controlled with <i>expandedKeys</i> property.</p>
         </app-docsectiontext>
         <div class="card">
-            <p-button (click)="toggleApplications()" label="Toggle Applications" />
+            <p-button (onClick)="toggleApplications()" label="Toggle Applications" />
             <p-deferred-demo (load)="loadDemoData()">
                 <p-treeTable [value]="files" [scrollable]="true" [tableStyle]="{ 'min-width': '50rem' }" styleClass="mt-4">
                     <ng-template pTemplate="header">
@@ -59,7 +59,7 @@ export class ControlledDoc {
     }
 
     code: Code = {
-        basic: `<p-button (click)="toggleApplications()" label="Toggle Applications" />
+        basic: `<p-button (onClick)="toggleApplications()" label="Toggle Applications" />
 <p-treeTable [value]="files" [scrollable]="true" [tableStyle]="{ 'min-width': '50rem' }" styleClass="mt-4">
     <ng-template pTemplate="header">
         <tr>
@@ -81,7 +81,7 @@ export class ControlledDoc {
 </p-treeTable>`,
 
         html: `<div class="card">
-<p-button (click)="toggleApplications()" label="Toggle Applications" />
+<p-button (onClick)="toggleApplications()" label="Toggle Applications" />
 <p-treeTable [value]="files" [scrollable]="true" [tableStyle]="{ 'min-width': '50rem' }" styleClass="mt-4">
     <ng-template pTemplate="header">
         <tr>