Skip to content

Creating a view inside an effect will track any signal reads that happen in the view #54548

@kfrancois

Description

@kfrancois

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

I have a PopoverDirective which contains an input that allows the developer to pass in a custom template. It works like this:

<div
  appPopover
  [isPopoverVisible]="isPopoverVisible()"
  [popoverTemplate]="popoverTemplate"
>
   Regular content here
</div>

<ng-template #popoverTemplate> Popover content here </ng-template>

Internally, this directive fill open or destroy the popover depending on the isPopoverVisible input:

effect(() => {
  if (this.isPopoverVisible()) {
    this.openPopover();
  } else {
    this.destroyPopover();
  }
});

This works welll, but when adding signals into the popoverTemplate I notice that any effects contained inside the appPopover directive will fire again. Even if none of the directive's inputs have changed.

For example:

<div
  appPopover
  [isPopoverVisible]="isPopoverVisible()"
  [popoverTemplate]="popoverTemplate"
>
   Regular content here
</div>

<ng-template #popoverTemplate> {{ someSignal() }} </ng-template>

When someSignal changes, my effect inside the appPopover directive will now fire again, even though none of its inputs have changed (only the input of the template we pass in has changed).

This feels unintentional, I'd like to know if this is intended behaviour, or a bug in the framework.

Please provide a link to a minimal reproduction of the bug

https://github.com/kfrancois/angular-effects-repro

Also available in Stackblitz: https://stackblitz.com/github/kfrancois/angular-effects-repro

Please provide the exception or error you saw

Using the above link, follow these steps:

  1. Open the console
  2. Click on the Show popover button
  3. Click on the Do async logic to populate popover template button
  4. Observe the console output

On the "working" example, isPopoverVisible: true does not log twice.
On the "broken" example, isPopoverVisible: true does log twice, which is unexpected.

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 17.2.0
Node: 21.6.1 (Unsupported)
Package Manager: npm 10.4.0
OS: darwin arm64

Angular: 17.2.1

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    area: coreIssues related to the framework runtimecore: reactivityWork related to fine-grained reactivity in the core frameworkcross-cutting: signals

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions