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

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:

enter image description here

enter image description here

sample : https://stackblitz.com/edit/angular...onent.html,app.component.ts,app/app.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

Continue reading...