Merge pull request #24766 from abpframework/issue-24673

feat(angular): Migrate to output functions

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();
+  readonly dataSelect = output<any>();
-
+  readonly initialized = output<boolean>();
-  @Output() initialized = new EventEmitter<boolean>();
 
   @ViewChild('canvas') canvas!: ElementRef<HTMLCanvasElement>;
 

npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts

@@ -11,12 +11,12 @@ import {
   LOCALE_ID,
   OnChanges,
   OnDestroy,
-  Output,
   PLATFORM_ID,
   signal,
   SimpleChanges,
   TemplateRef,
   TrackByFunction,
+  output,
   contentChild,
   viewChild
 } from '@angular/core';
@@ -118,7 +118,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 +128,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>();
 
   readonly rowDetailComponent = contentChild(ExtensibleTableRowDetailComponent);
 

npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts

@@ -7,7 +7,7 @@ import {
   inject,
   Input,
   OnInit,
-  Output,
+  output,
   TemplateRef,
   ViewEncapsulation,
 } from '@angular/core';
@@ -63,11 +63,11 @@ export class TreeComponent implements OnInit {
   readonly menu = contentChild<TemplateRef<any>>('menu');
   readonly customNodeTemplate = contentChild(TreeNodeTemplateDirective);
   readonly expandedIconTemplate = contentChild(ExpandedIconTemplateDirective);
-  @Output() readonly checkedKeysChange = new EventEmitter();
+  readonly checkedKeysChange = output<any>();
-  @Output() readonly expandedKeysChange = new EventEmitter<string[]>();
+  readonly expandedKeysChange = output<string[]>();
-  @Output() readonly selectedNodeChange = new EventEmitter();
+  readonly selectedNodeChange = output<any>();
-  @Output() readonly dropOver = new EventEmitter<DropEvent>();
+  readonly dropOver = output<DropEvent>();
-  @Output() readonly nzExpandChange = new EventEmitter<NzFormatEmitEvent>();
+  readonly nzExpandChange = output<NzFormatEmitEvent>();
   @Input() noAnimation = true;
   @Input() draggable: boolean;
   @Input() checkable: boolean;

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 { 
+import {
-  ChangeDetectorRef, 
+  ChangeDetectorRef,
-  Directive, 
+  Directive,
-  ElementRef, 
+  ElementRef,
-  EventEmitter, 
+  Input,
-  Input, 
+  OnInit,
-  OnInit, 
+  inject,
-  Output, 
+  output
-  inject 
 } 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/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 = output<boolean>();
-  readonly twoWayChange = new EventEmitter<boolean>();
 
-  @Output()
+  readonly someOutput = output<string>();
-  readonly someOutput = new EventEmitter<string>();
 
   setTwoWay(value) {
     this.twoWay = value;

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

npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts

@@ -20,13 +20,13 @@ import {
   computed,
   DOCUMENT,
   ElementRef,
-  EventEmitter,
   inject,
   Injector,
   Input,
-  Output,
+  QueryList,
   signal,
   TrackByFunction,
+  output,
   viewChildren
 } from '@angular/core';
 import { of } from 'rxjs';
@@ -160,7 +160,7 @@ export class PermissionManagementComponent
     }
   }
 
-  @Output() readonly visibleChange = new EventEmitter<boolean>();
+  readonly visibleChange = output<boolean>();
 
   selectAllInThisTabsRef = viewChildren<ElementRef<HTMLInputElement>>('selectAllInThisTabsRef');
   selectAllInAllTabsRef = viewChildren<ElementRef<HTMLInputElement>>('selectAllInAllTabsRef');

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

npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts

@@ -2,12 +2,11 @@
 import {
   Component,
   ElementRef,
-  EventEmitter,
   Input,
   OnInit,
-  Output,
   Renderer2,
   inject,
+  output,
   viewChild
 } 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)"
+      (click.stop)="click.emit($event); abpClick.emit($event)"
-      (focus)="focus.next($event); abpFocus.next($event)"
+      (focus)="focus.emit($event); abpFocus.emit($event)"
-      (blur)="blur.next($event); abpBlur.next($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>();
 
   readonly buttonRef = viewChild.required<ElementRef<HTMLButtonElement>>('button');
 

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()"
+        (blur)="checkboxBlur.emit()"
-        (focus)="checkboxFocus.next()"
+        (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>();
+  readonly checkboxBlur = output<void>();
-  @Output() checkboxFocus = new EventEmitter<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()"
+        (blur)="formBlur.emit()"
-        (focus)="formFocus.next()"
+        (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>();
+  readonly formBlur = output<void>();
-  @Output() formFocus = new EventEmitter<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 '';