From 956773d7c3a6130ca7cd5d4c7f0f55784113f696 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Wed, 28 Jan 2026 15:27:28 +0300
Subject: [PATCH 1/3] Refactor to use Angular's new output() event API

Replaces all usages of EventEmitter and @Output with the new output() API across multiple components and directives. This modernizes event handling to align with Angular's latest best practices and improves code consistency.
---
 .../extensible-table.component.ts             | 11 +++++-----
 .../src/lib/directives/caps-lock.directive.ts |  4 ++--
 .../src/lib/directives/debounce.directive.ts  |  4 ++--
 .../lib/directives/form-submit.directive.ts   | 19 ++++++++---------
 .../core/src/lib/directives/init.directive.ts |  4 ++--
 .../directives/stop-propagation.directive.ts  |  4 ++--
 .../feature-management.component.ts           |  4 ++--
 .../permission-management.component.ts        |  5 ++---
 .../lib/components/button/button.component.ts | 21 +++++++++----------
 .../components/checkbox/checkbox.component.ts | 10 ++++-----
 .../form-input/form-input.component.ts        | 10 ++++-----
 .../lib/components/toast/toast.component.ts   |  4 ++--
 12 files changed, 48 insertions(+), 52 deletions(-)

diff --git a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
index 75253b1f02..a245517282 100644
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
@@ -5,20 +5,19 @@ import {
   Component,
   computed,
   ContentChild,
-  EventEmitter,
   inject,
   Injector,
   Input,
   LOCALE_ID,
   OnChanges,
   OnDestroy,
-  Output,
   PLATFORM_ID,
   signal,
   SimpleChanges,
   TemplateRef,
   TrackByFunction,
   ViewChild,
+  output
 } from '@angular/core';
 import { AsyncPipe, isPlatformBrowser, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 
@@ -118,7 +117,7 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
 
   @Input() actionsTemplate?: TemplateRef<any>;
 
-  @Output() tableActivate = new EventEmitter();
+  readonly tableActivate = output();
 
   @Input() selectable = false;
 
@@ -128,18 +127,18 @@ export class ExtensibleTableComponent<R = any> implements OnChanges, AfterViewIn
   _selectionType: SelectionType = SelectionType.multiClick;
 
   @Input() selected: any[] = [];
-  @Output() selectionChange = new EventEmitter<any[]>();
+  readonly selectionChange = output<any[]>();
 
   // Infinite scroll configuration
   @Input() infiniteScroll = false;
   @Input() isLoading = false;
   @Input() scrollThreshold = 10;
-  @Output() loadMore = new EventEmitter<void>();
+  readonly loadMore = output<void>();
   @Input() tableHeight: number;
 
   @Input() rowDetailTemplate?: TemplateRef<RowDetailContext<R>>;
   @Input() rowDetailHeight: string | number = '100%';
-  @Output() rowDetailToggle = new EventEmitter<R>();
+  readonly rowDetailToggle = output<R>();
 
   @ContentChild(ExtensibleTableRowDetailComponent)
   rowDetailComponent?: ExtensibleTableRowDetailComponent<R>;
diff --git a/npm/ng-packs/packages/core/src/lib/directives/caps-lock.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/caps-lock.directive.ts
index 99bfcebb92..792b671962 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/caps-lock.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/caps-lock.directive.ts
@@ -1,10 +1,10 @@
-import { Directive, EventEmitter, HostListener, Output } from '@angular/core';
+import { Directive, HostListener, output } from '@angular/core';
 
 @Directive({
   selector: '[abpCapsLock]',
 })
 export class TrackCapsLockDirective {
-  @Output('abpCapsLock') capsLock = new EventEmitter<boolean>();
+  readonly capsLock = output<boolean>({ alias: 'abpCapsLock' });
 
   @HostListener('window:keydown', ['$event'])
   onKeyDown(event: KeyboardEvent): void {
diff --git a/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts
index 239aed688d..a3fb542d4d 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, EventEmitter, Input, OnInit, Output, inject } from '@angular/core';
+import { Directive, ElementRef, Input, OnInit, inject, output } from '@angular/core';
 import { fromEvent } from 'rxjs';
 import { debounceTime } from 'rxjs/operators';
 import { SubscriptionService } from '../services/subscription.service';
@@ -13,7 +13,7 @@ export class InputEventDebounceDirective implements OnInit {
 
   @Input() debounce = 300;
 
-  @Output('input.debounce') readonly debounceEvent = new EventEmitter<Event>();
+  readonly debounceEvent = output<Event>({ alias: 'input.debounce' });
 
   ngOnInit(): void {
     const input$ = fromEvent<InputEvent>(this.el.nativeElement, 'input').pipe(
diff --git a/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts
index 879fbdf780..eaeca51e94 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts
@@ -1,12 +1,11 @@
-import { 
-  ChangeDetectorRef, 
-  Directive, 
-  ElementRef, 
-  EventEmitter, 
-  Input, 
-  OnInit, 
-  Output, 
-  inject 
+import {
+  ChangeDetectorRef,
+  Directive,
+  ElementRef,
+  Input,
+  OnInit,
+  inject,
+  output
 } from '@angular/core';
 import { FormGroupDirective, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { fromEvent } from 'rxjs';
@@ -37,7 +36,7 @@ export class FormSubmitDirective implements OnInit {
   @Input()
   markAsDirtyWhenSubmit = true;
 
-  @Output() readonly ngSubmit = new EventEmitter();
+  readonly ngSubmit = output();
 
   executedNgSubmit = false;
 
diff --git a/npm/ng-packs/packages/core/src/lib/directives/init.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/init.directive.ts
index 1271f031ba..e4033f9f16 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/init.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/init.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, Output, EventEmitter, ElementRef, AfterViewInit, inject } from '@angular/core';
+import { Directive, ElementRef, AfterViewInit, inject, output } from '@angular/core';
 
 @Directive({
   selector: '[abpInit]',
@@ -6,7 +6,7 @@ import { Directive, Output, EventEmitter, ElementRef, AfterViewInit, inject } fr
 export class InitDirective implements AfterViewInit {
   private elRef = inject(ElementRef);
 
-  @Output('abpInit') readonly init = new EventEmitter<ElementRef<any>>();
+  readonly init = output<ElementRef<any>>({ alias: 'abpInit' });
 
   ngAfterViewInit() {
     this.init.emit(this.elRef);
diff --git a/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts b/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts
index a1af9bf07e..2a3c8f0a80 100644
--- a/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, EventEmitter, OnInit, Output, inject } from '@angular/core';
+import { Directive, ElementRef, OnInit, inject, output } from '@angular/core';
 import { fromEvent } from 'rxjs';
 import { SubscriptionService } from '../services/subscription.service';
 
@@ -10,7 +10,7 @@ export class StopPropagationDirective implements OnInit {
   private el = inject(ElementRef);
   private subscription = inject(SubscriptionService);
 
-  @Output('click.stop') readonly stopPropEvent = new EventEmitter<MouseEvent>();
+  readonly stopPropEvent = output<MouseEvent>({ alias: 'click.stop' });
 
   ngOnInit(): void {
     this.subscription.addOne(fromEvent<MouseEvent>(this.el.nativeElement, 'click'), event => {
diff --git a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts
index 5feac210e5..200e39736b 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts
+++ b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, inject, DOCUMENT } from '@angular/core';
+import { Component, Input, inject, DOCUMENT, output } from '@angular/core';
 import { NgTemplateOutlet } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { ConfigStateService, LocalizationPipe, TrackByService } from '@abp/ng.core';
@@ -103,7 +103,7 @@ export class FeatureManagementComponent
     }
   }
 
-  @Output() readonly visibleChange = new EventEmitter<boolean>();
+  readonly visibleChange = output<boolean>();
 
   modalBusy = false;
 
diff --git a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
index b2612e9aaf..149b077b7a 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts
@@ -19,14 +19,13 @@ import {
   computed,
   DOCUMENT,
   ElementRef,
-  EventEmitter,
   inject,
   Input,
-  Output,
   QueryList,
   signal,
   TrackByFunction,
   ViewChildren,
+  output
 } from '@angular/core';
 import { concat, of } from 'rxjs';
 import { finalize, switchMap, take, tap } from 'rxjs/operators';
@@ -160,7 +159,7 @@ export class PermissionManagementComponent
     }
   }
 
-  @Output() readonly visibleChange = new EventEmitter<boolean>();
+  readonly visibleChange = output<boolean>();
 
   @ViewChildren('selectAllInThisTabsRef')
   selectAllInThisTabsRef!: QueryList<ElementRef<HTMLInputElement>>;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
index 47272992fd..8ce05bd443 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts
@@ -2,13 +2,12 @@
 import {
   Component,
   ElementRef,
-  EventEmitter,
   Input,
   OnInit,
-  Output,
   Renderer2,
   ViewChild,
   inject,
+  output
 } from '@angular/core';
 import { ABP, StopPropagationDirective } from '@abp/ng.core';
 
@@ -22,9 +21,9 @@ import { ABP, StopPropagationDirective } from '@abp/ng.core';
       [attr.form]="formName"
       [class]="buttonClass"
       [disabled]="loading || disabled"
-      (click.stop)="click.next($event); abpClick.next($event)"
-      (focus)="focus.next($event); abpFocus.next($event)"
-      (blur)="blur.next($event); abpBlur.next($event)"
+      (click.stop)="click.emit($event); abpClick.emit($event)"
+      (focus)="focus.emit($event); abpFocus.emit($event)"
+      (blur)="blur.emit($event); abpBlur.emit($event)"
     >
       <i [class]="icon" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
     </button>
@@ -58,17 +57,17 @@ export class ButtonComponent implements OnInit {
   @Input()
   attributes?: ABP.Dictionary<string>;
 
-  @Output() readonly click = new EventEmitter<MouseEvent>();
+  readonly click = output<MouseEvent>();
 
-  @Output() readonly focus = new EventEmitter<FocusEvent>();
+  readonly focus = output<FocusEvent>();
 
-  @Output() readonly blur = new EventEmitter<FocusEvent>();
+  readonly blur = output<FocusEvent>();
 
-  @Output() readonly abpClick = new EventEmitter<MouseEvent>();
+  readonly abpClick = output<MouseEvent>();
 
-  @Output() readonly abpFocus = new EventEmitter<FocusEvent>();
+  readonly abpFocus = output<FocusEvent>();
 
-  @Output() readonly abpBlur = new EventEmitter<FocusEvent>();
+  readonly abpBlur = output<FocusEvent>();
 
   @ViewChild('button', { static: true })
   buttonRef!: ElementRef<HTMLButtonElement>;
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
index 8da578f9a7..be9c368704 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
+import { Component, forwardRef, Input, output } from '@angular/core';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 
@@ -13,8 +13,8 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
         [readonly]="checkboxReadonly"
         [class]="checkboxClass"
         [style]="checkboxStyle"
-        (blur)="checkboxBlur.next()"
-        (focus)="checkboxFocus.next()"
+        (blur)="checkboxBlur.emit()"
+        (focus)="checkboxFocus.emit()"
       />
       @if (label) {
         <label [class]="labelClass" [for]="checkboxId">
@@ -44,6 +44,6 @@ export class FormCheckboxComponent extends AbstractNgModelComponent {
     | undefined;
   @Input() checkboxClass = 'form-check-input';
   @Input() checkboxReadonly = false;
-  @Output() checkboxBlur = new EventEmitter<void>();
-  @Output() checkboxFocus = new EventEmitter<void>();
+  readonly checkboxBlur = output<void>();
+  readonly checkboxFocus = output<void>();
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
index 9e1b843755..2af082b429 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, forwardRef, Input, Output } from '@angular/core';
+import { Component, forwardRef, Input, output } from '@angular/core';
 import { FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
 
@@ -18,8 +18,8 @@ import { AbstractNgModelComponent, LocalizationPipe } from '@abp/ng.core';
         [readonly]="inputReadonly"
         [class]="inputClass"
         [style]="inputStyle"
-        (blur)="formBlur.next()"
-        (focus)="formFocus.next()"
+        (blur)="formBlur.emit()"
+        (focus)="formFocus.emit()"
         [(ngModel)]="value"
       />
     </div>
@@ -46,6 +46,6 @@ export class FormInputComponent extends AbstractNgModelComponent {
     | null
     | undefined;
   @Input() inputClass = 'form-control';
-  @Output() formBlur = new EventEmitter<void>();
-  @Output() formFocus = new EventEmitter<void>();
+  readonly formBlur = output<void>();
+  readonly formFocus = output<void>();
 }
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
index c3fb4d251e..7f102a5277 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Component, Input, OnInit, output } from '@angular/core';
 import { Toaster } from '../../models/toaster';
 import { LocalizationPipe } from '@abp/ng.core';
 
@@ -12,7 +12,7 @@ export class ToastComponent implements OnInit {
   @Input()
   toast!: Toaster.Toast;
 
-  @Output() remove = new EventEmitter<number>();
+  readonly remove = output<number>();
 
   get severityClass(): string {
     if (!this.toast || !this.toast.severity) return '';

From a29326402bf0f6f174be9aa9df9ef9a6b1136558 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Wed, 28 Jan 2026 15:33:49 +0300
Subject: [PATCH 2/3] Refactor to use Angular's new output() function

Replaces EventEmitter and @Output() with the new output() function in chart, tree, and test components. This modernizes the codebase to align with recent Angular best practices and reduces boilerplate.
---
 .../components/chart.js/src/chart.component.ts      | 10 ++++------
 .../tree/src/lib/components/tree.component.ts       | 13 ++++++-------
 .../tests/replaceable-template.directive.spec.ts    |  8 +++-----
 3 files changed, 13 insertions(+), 18 deletions(-)

diff --git a/npm/ng-packs/packages/components/chart.js/src/chart.component.ts b/npm/ng-packs/packages/components/chart.js/src/chart.component.ts
index 9ab84aedcd..20689f9fba 100644
--- a/npm/ng-packs/packages/components/chart.js/src/chart.component.ts
+++ b/npm/ng-packs/packages/components/chart.js/src/chart.component.ts
@@ -4,14 +4,13 @@ import {
   ChangeDetectorRef, 
   Component, 
   ElementRef, 
-  EventEmitter, 
   Input, 
   OnChanges, 
   OnDestroy, 
-  Output, 
   SimpleChanges, 
   ViewChild, 
-  inject 
+  inject,
+  output,
 } from '@angular/core';
 
 let Chart: any;
@@ -53,9 +52,8 @@ export class ChartComponent implements AfterViewInit, OnDestroy, OnChanges {
 
   @Input() responsive = true;
 
-  @Output() dataSelect = new EventEmitter();
-
-  @Output() initialized = new EventEmitter<boolean>();
+  readonly dataSelect = output<any>();
+  readonly initialized = output<boolean>();
 
   @ViewChild('canvas') canvas!: ElementRef<HTMLCanvasElement>;
 
diff --git a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
index 5c320a539b..b2ff364715 100644
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
@@ -3,11 +3,10 @@ import {
   ChangeDetectorRef,
   Component,
   ContentChild,
-  EventEmitter,
   inject,
   Input,
   OnInit,
-  Output,
+  output,
   TemplateRef,
   ViewEncapsulation,
 } from '@angular/core';
@@ -63,11 +62,11 @@ export class TreeComponent implements OnInit {
   @ContentChild('menu') menu: TemplateRef<any>;
   @ContentChild(TreeNodeTemplateDirective) customNodeTemplate: TreeNodeTemplateDirective;
   @ContentChild(ExpandedIconTemplateDirective) expandedIconTemplate: ExpandedIconTemplateDirective;
-  @Output() readonly checkedKeysChange = new EventEmitter();
-  @Output() readonly expandedKeysChange = new EventEmitter<string[]>();
-  @Output() readonly selectedNodeChange = new EventEmitter();
-  @Output() readonly dropOver = new EventEmitter<DropEvent>();
-  @Output() readonly nzExpandChange = new EventEmitter<NzFormatEmitEvent>();
+  readonly checkedKeysChange = output<any>();
+  readonly expandedKeysChange = output<string[]>();
+  readonly selectedNodeChange = output<any>();
+  readonly dropOver = output<DropEvent>();
+  readonly nzExpandChange = output<NzFormatEmitEvent>();
   @Input() noAnimation = true;
   @Input() draggable: boolean;
   @Input() checkable: boolean;
diff --git a/npm/ng-packs/packages/core/src/lib/tests/replaceable-template.directive.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/replaceable-template.directive.spec.ts
index 08075ee7f4..3cd625cd3c 100644
--- a/npm/ng-packs/packages/core/src/lib/tests/replaceable-template.directive.spec.ts
+++ b/npm/ng-packs/packages/core/src/lib/tests/replaceable-template.directive.spec.ts
@@ -1,4 +1,4 @@
-import { Component, EventEmitter, Input, Output, inject } from '@angular/core';
+import { Component, Input, inject, output } from '@angular/core';
 import { Router } from '@angular/router';
 import { createDirectiveFactory, SpectatorDirective } from '@ngneat/spectator/vitest';
 import { BehaviorSubject } from 'rxjs';
@@ -18,11 +18,9 @@ class DefaultComponent {
   @Input()
   twoWay: boolean;
 
-  @Output()
-  readonly twoWayChange = new EventEmitter<boolean>();
+  readonly twoWayChange = output<boolean>();
 
-  @Output()
-  readonly someOutput = new EventEmitter<string>();
+  readonly someOutput = output<string>();
 
   setTwoWay(value) {
     this.twoWay = value;

From 9bc6ea1e6c991d8d0b4aeec811c21456206d6b45 Mon Sep 17 00:00:00 2001
From: Fahri Gedik <53567152+fahrigedik@users.noreply.github.com>
Date: Wed, 28 Jan 2026 15:47:25 +0300
Subject: [PATCH 3/3] Support OutputEmitterRef in component outputs

Updated FeatureManagementComponentOutputs and PermissionManagementComponentOutputs to allow visibleChange to be either EventEmitter<boolean> or OutputEmitterRef<boolean>. This change improves compatibility with different output emitter types in Angular components.
---
 .../feature-management/src/lib/models/feature-management.ts   | 4 ++--
 .../src/lib/models/permission-management.ts                   | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/npm/ng-packs/packages/feature-management/src/lib/models/feature-management.ts b/npm/ng-packs/packages/feature-management/src/lib/models/feature-management.ts
index c04d917515..6337eea163 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/models/feature-management.ts
+++ b/npm/ng-packs/packages/feature-management/src/lib/models/feature-management.ts
@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, OutputEmitterRef } from '@angular/core';
 
 export namespace FeatureManagement {
   export interface FeatureManagementComponentInputs {
@@ -8,6 +8,6 @@ export namespace FeatureManagement {
   }
 
   export interface FeatureManagementComponentOutputs {
-    readonly visibleChange: EventEmitter<boolean>;
+    readonly visibleChange: EventEmitter<boolean> | OutputEmitterRef<boolean>;
   }
 }
diff --git a/npm/ng-packs/packages/permission-management/src/lib/models/permission-management.ts b/npm/ng-packs/packages/permission-management/src/lib/models/permission-management.ts
index 7909de0db9..58d7d95232 100644
--- a/npm/ng-packs/packages/permission-management/src/lib/models/permission-management.ts
+++ b/npm/ng-packs/packages/permission-management/src/lib/models/permission-management.ts
@@ -1,5 +1,5 @@
 import { GetPermissionListResultDto } from '@abp/ng.permission-management/proxy';
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, OutputEmitterRef } from '@angular/core';
 
 export namespace PermissionManagement {
   export interface State {
@@ -14,6 +14,6 @@ export namespace PermissionManagement {
   }
 
   export interface PermissionManagementComponentOutputs {
-    readonly visibleChange: EventEmitter<boolean>;
+    readonly visibleChange: EventEmitter<boolean> | OutputEmitterRef<boolean>;
   }
 }