Browse Source

Replace ngOnChanges with effect in DisabledDirective

Switch DisabledDirective from the OnChanges lifecycle to Angular signal-based reactivity: remove OnChanges/SimpleChanges usage and import effect/input instead. Create an effect that reads the abpDisabled input signal and enables/disables the injected NgControl accordingly, preserving previous behavior while using reactive signals (addresses timing/changes handling referenced in Angular issue).
pull/24777/head
Fahri Gedik 8 months ago
parent
commit
2965f45398
  1. 13
      npm/ng-packs/packages/theme-shared/src/lib/directives/disabled.directive.ts

13
npm/ng-packs/packages/theme-shared/src/lib/directives/disabled.directive.ts

@ -1,18 +1,19 @@
import { Directive, OnChanges, SimpleChanges, inject, input } from '@angular/core';
import { Directive, effect, inject, input } from '@angular/core';
import { NgControl } from '@angular/forms';
@Directive({
selector: '[abpDisabled]',
})
export class DisabledDirective implements OnChanges {
export class DisabledDirective {
private ngControl = inject(NgControl, { host: true });
readonly abpDisabled = input(false);
// Related issue: https://github.com/angular/angular/issues/35330
ngOnChanges({ abpDisabled }: SimpleChanges) {
if (this.ngControl.control && abpDisabled) {
this.ngControl.control[abpDisabled.currentValue ? 'disable' : 'enable']();
private disabledEffect = effect(() => {
const disabled = this.abpDisabled();
if (this.ngControl.control) {
this.ngControl.control[disabled ? 'disable' : 'enable']();
}
}
});
}

Loading…
Cancel
Save