This issue is related to the Angular core lifecycle handling (@angular/core), specifically in nested component

[Manikandan-LakshmananA]

Command

add

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

We’re using a grid component structure that includes both ColumnDirective elements and an array-based column configuration. We’ve observed a discrepancy in component destruction behavior between Array-based columns and Complex column directives.

For array-based configurations, the component destruction lifecycle (ngOnDestroy) executes correctly, and the isDestroyed flag is set as expected.

For directive-based column definitions (nested components via ColumnDirective), the component destruction is not occurring as expected. The ngOnDestroy method is not triggered reliably for nested directive components, and as a result, we are unable to track or respond to destruction state changes.

We’ve provided a StackBlitz sample and a screenshot to illustrate the issue:

sample : https://stackblitz.com/edit/angular-ejs-grid-aggregates-xegsuxcp?file=app.component.html,app.component.ts,app%2Fapp.module.ts

Steps to reproduce:

Create a grid with nested ColumnDirective usage.

Modify or remove a column dynamically (e.g., uncheck a checkbox controlling visibility).

Observe the behavior in lifecycle hooks like ngOnDestroy in nested components.

Compare this with similar actions in array-based column definitions.

Actual Behavior :

In array-based columns: ngOnDestroy() is called correctly, and destruction is clean.

In complex column directives: destruction is not triggered, and the isDestroyed state is never updated.

Expected Behavior:

Nested directive-based components (e.g., ColumnDirective) should also invoke ngOnDestroy() properly when removed from the DOM or destroyed via dynamic updates. The isDestroyed flag should be updated to allow consistent tracking.

Minimal Reproduction

Steps to reproduce:

Create a grid with nested ColumnDirective usage.

Modify or remove a column dynamically (e.g., uncheck a checkbox controlling visibility).

Observe the behavior in lifecycle hooks like ngOnDestroy in nested components.

Compare this with similar actions in array-based column definitions.

Exception or Error

Expected Behavior:

Nested directive-based components (e.g., ColumnDirective) should also invoke ngOnDestroy() properly when removed from the DOM or destroyed via dynamic updates. The isDestroyed flag should be updated to allow consistent tracking.

Your Environment

Angular Version     : 16.x / 17.x
Framework           : Angular
Component Type      : Grid with nested Column Directives
Node Version        : 18.x
OS                  : Windows

Anything else relevant?

No response

[JeanMeche]

Hello, we reviewed this issue and determined that it doesn't fall into the bug report or feature request category. This issue tracker is not suitable for support requests, please repost your issue on StackOverflow using tag angular.

If you are wondering why we don't resolve support issues via the issue tracker, please check out this explanation.