In the previous Angular codebase, we utilized:
@Input() foo = '';
ngOnChanges(changes: Record<string, SimpleChange | undefined>): void {
if (changes['foo']) {
if (changes['foo'].firstChange) {
// handling logic for first change
console.log('first change', changes['foo'].currentValue);
} else {
// different logic for subsequent changes
console.log(
'2+ changes',
changes['foo'].previousValue,
changes['foo'].currentValue
);
}
}
}
Is there a way to replicate this functionality using the new signal input and effect?
I've come across suggestions to convert the signal into an observable and utilize pairwise, but it seems that pairwise doesn't emit for the initial value at all.
Check out this simple example to experiment with: https://stackblitz.com/edit/stackblitz-starters-ymnhaw?file=src%2Fcmp%2Fcmp.component.ts
The reason for my inquiry is related to the discussions on RFC for signal components, where it's noted that
- Signal-based components will maintain only the lifecycle methods
ngOnInitandngOnDestroy ngOnChanges- used for monitoring input changes. With signal-based inputs, computed can be applied to generate new values, or effects can be utilized for reactive side-effects.