angular / angular/components

feat(CdkPortalOutlet): Introduce signal-friendly way to track portal attachment/detachment

Open
#31,929 0 comments 0 reactions 0 assignees View on GitHub
area: cdk/portal feature P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Feature Description

Tracking if a portal is attached/detached within a `CdkPortalOutlet` can be cumbersome, it would be a nice improvement to expose the attached portal or the attachment/detachment state as a signal.

### Use Case

We create a component portal on a parent element which will get components attached by its children. In case a component is attached, I need to adapt the styling.

Lets take the following example, my expectation initially was that the class will be set correctly.

```
myOutlet = viewChild(CdkPortalOutlet);

// outlet gets passed to children which will attach components

```
The issue though is that `myOutlet` is only initialized once and changes to the `portal` within are not tracked if there is no other event triggering change detection at the same time. So the code above can actually get out-of-sync.

The best workaround I found is to manually keep track of the attachment/detachment.
This is more complex than it should be and my example is also possibly missing cleanup code

```
myOutlet = viewChild(CdkPortalOutlet);
isOutletAttached = signal(false);

effect(() => {
this.myOutlet()?.attached.subscribe(() => {
this.isOutletAttached.set(true);
this.myOutlet().attachedRef?.onDestroy(() => this.isOutletAttached.set(false));
});
});

...
```

Ideally one of the internal members of the `CdkPortalOutlet` should expose a signal which can be used.

```
myOutlet = viewChild(CdkPortalOutlet);

// multiple options
...
...
...
```

Contributor guide

Open the contributing guide

Research direction

Start with the CdkPortalOutlet entry point named in the issue and trace how its portal attachment and detachment state is exposed. Compare the proposed signal forms against the existing attached and attachedRef behavior. Done means consumers can react to attachment changes without manual subscriptions or cleanup, with the chosen API and its behavior documented by the project’s tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.