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.

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>;

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 {

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(

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;
 

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);

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 => {

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;
 

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>>;

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>;

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>();
 }

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>();
 }

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 '';