input signal effects are not run when attaching a directive to an IonButton about angular

[Eraldo]

Referenced in Ionic: ionic-team/ionic-framework#29444

[Flo0806]

Hello. We found the same issue in a new project inside our company. It looks like the problem is really the changeDetectorRef.detach. This simple component isn't shown in effect too, if you add the same directive:

import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';

@Component({
  selector: 'app-test-button',
  standalone: true,
  imports: [],
  templateUrl: './test-button.component.html',
  styleUrl: './test-button.component.css',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class TestButtonComponent {
constructor(changeRef: ChangeDetectorRef) {
  changeRef.detach();
}
}

Component and directive:

@Directive({
  selector: '[test]',
  standalone: true,
})
export class TestDirective {
  test = input.required<string>();
  test2 = computed(() => {
    return this.test() + '2';
  });

  constructor() {
    effect(() => {
      console.log('>> EFFECT', this.test2());
    });
  }
}

.........

<app-test-button [test]="inputText">
    Button with Directive
</app-test-button>

[JeanMeche]

The root cause is the injection of the ChangeDetectorRef in directives. When the directive is applied to a component, the CDR injected in the directive is the components CDR.

The effect is scheduled to run first when the component is init and uses the CDR to do that. In this case, the component is never init (because of running detach in the constructor) so the effect is never started.

A workaround for this would be to let the component finish its initialization and detach only in the ngAfterViewInit hook. This way the effect will

[pkozlowski-opensource]

Here is a minimal repro: https://stackblitz.com/edit/stackblitz-starters-7zd1fv?file=src%2Fmain.ts

As @JeanMeche pointed out, the root cause here is a component detaching from the change detection tree. Having said this I do recognize that this is very non-obvious - this is one of the cases we want to look into before stabilizing effects API.

[pkozlowski-opensource]

I've created #55808 to capture the root cause without any external dependencies. Let's continue the discussion in there.

Duplicate of #55808