Skip to content

feat: add support for Angular signal inputs and outputs#12645

Draft
PieterjanDeClippel wants to merge 2 commits into
help-me-mom:mainfrom
PieterjanDeClippel:signal-inputs-outputs
Draft

feat: add support for Angular signal inputs and outputs#12645
PieterjanDeClippel wants to merge 2 commits into
help-me-mom:mainfrom
PieterjanDeClippel:signal-inputs-outputs

Conversation

@PieterjanDeClippel
Copy link
Copy Markdown

Summary

This PR adds support for Angular 17.1+ signal-based inputs and outputs in mock components.

Files Created:

  • libs/ng-mocks/src/lib/common/decorate.signal-inputs.ts - Handles decoration of signal inputs on mock components
  • libs/ng-mocks/src/lib/common/decorate.signal-outputs.ts - Handles decoration of signal outputs on mock components
  • tests/signal-inputs-outputs/test.spec.ts - Test file for signal inputs/outputs

Files Modified:

  • libs/ng-mocks/src/lib/common/core.types.ts - Added SignalInputDef and SignalOutputDef types
  • libs/ng-mocks/src/lib/resolve/collect-declarations.ts - Added parsing of signal inputs/outputs from Angular's internal ɵcmp/ɵdir metadata
  • libs/ng-mocks/src/lib/mock/decorate-declaration.ts - Added calls to decorate signal inputs/outputs

How it works:

  1. Detection: The code parses Angular's internal component/directive definitions (ɵcmp, ɵdir) to find signal inputs/outputs which have isSignal: true in their metadata
  2. Signal Inputs: Creates writable signals on the mock prototype so tests can both read and write values
  3. Signal Outputs: Creates mock OutputRef objects that support subscribe() and emit() methods for testing

Usage in tests:

// For signal inputs - the mock will have writable signals
const mockChild = ngMocks.findInstance(SignalChildComponent);
mockChild.signalInput.set('new value'); // Set signal input value

// For signal outputs - the mock has emit() method
mockChild.signalOutput.emit('test value'); // Emit from output

The implementation maintains backward compatibility - it only activates for components that use signal inputs/outputs (Angular 17.1+).


Split from PR #12594 which combines both Angular 21 upgrade and signal support

🤖 Generated with Claude Code

Adds support for Angular 17.1+ signal-based inputs and outputs in mock components.

Files Created:
- libs/ng-mocks/src/lib/common/decorate.signal-inputs.ts - Handles decoration of signal inputs on mock components
- libs/ng-mocks/src/lib/common/decorate.signal-outputs.ts - Handles decoration of signal outputs on mock components
- tests/signal-inputs-outputs/test.spec.ts - Test file for signal inputs/outputs

Files Modified:
- libs/ng-mocks/src/lib/common/core.types.ts - Added SignalInputDef and SignalOutputDef types
- libs/ng-mocks/src/lib/resolve/collect-declarations.ts - Added parsing of signal inputs/outputs from Angular's internal metadata
- libs/ng-mocks/src/lib/mock/decorate-declaration.ts - Added calls to decorate signal inputs/outputs
- Convert CRLF to LF line endings
- Remove unused variable in test file

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
@PieterjanDeClippel PieterjanDeClippel marked this pull request as draft January 10, 2026 03:00
@satanTime satanTime changed the base branch from master to main March 6, 2026 15:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant