Skip to content

feat(angular): Migrate to output functions#24766

Open
fahrigedik wants to merge 4 commits intodevfrom
issue-24673
Open

feat(angular): Migrate to output functions#24766
fahrigedik wants to merge 4 commits intodevfrom
issue-24673

Conversation

@fahrigedik
Copy link
Member

Description

This PR migrates Angular packages to output functions

Resolves #24673 (write the related issue number if available)

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.
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.
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.
Copilot AI review requested due to automatic review settings February 4, 2026 12:42
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR migrates Angular packages from the legacy @Output() decorator with EventEmitter to the modern output() function, following Angular's recommended migration path for output properties.

Changes:

  • Migrated all @Output() decorators to use the new output() function across components and directives
  • Updated template event handlers to use .emit() instead of .next()
  • Updated type definitions to support both EventEmitter and OutputEmitterRef for backward compatibility

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated no comments.

Show a summary per file
File Description
npm/ng-packs/packages/theme-shared/src/lib/components/toast/toast.component.ts Migrated remove output to output function
npm/ng-packs/packages/theme-shared/src/lib/components/form-input/form-input.component.ts Migrated formBlur and formFocus outputs with template updates
npm/ng-packs/packages/theme-shared/src/lib/components/checkbox/checkbox.component.ts Migrated checkboxBlur and checkboxFocus outputs with template updates
npm/ng-packs/packages/theme-shared/src/lib/components/button/button.component.ts Migrated all six button event outputs (click, focus, blur, and their abp variants)
npm/ng-packs/packages/permission-management/src/lib/models/permission-management.ts Added OutputEmitterRef to type union for backward compatibility
npm/ng-packs/packages/permission-management/src/lib/components/permission-management.component.ts Migrated visibleChange output to output function
npm/ng-packs/packages/feature-management/src/lib/models/feature-management.ts Added OutputEmitterRef to type union for backward compatibility
npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts Migrated visibleChange output to output function
npm/ng-packs/packages/core/src/lib/tests/replaceable-template.directive.spec.ts Updated test component to use output functions
npm/ng-packs/packages/core/src/lib/directives/stop-propagation.directive.ts Migrated aliased output using new alias syntax
npm/ng-packs/packages/core/src/lib/directives/init.directive.ts Migrated aliased output using new alias syntax
npm/ng-packs/packages/core/src/lib/directives/form-submit.directive.ts Migrated ngSubmit output to output function
npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts Migrated aliased output using new alias syntax
npm/ng-packs/packages/core/src/lib/directives/caps-lock.directive.ts Migrated aliased output using new alias syntax
npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts Migrated five tree component outputs
npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts Migrated four table-related outputs
npm/ng-packs/packages/components/chart.js/src/chart.component.ts Migrated dataSelect and initialized outputs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Angular - Migration to output function

3 participants