fix: content should display when column child is active (#1119)

* fix: content should display when column child is active

Author: steveblue

projects/swimlane/ngx-ui/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## HEAD (unreleased)
 
+- Fix (`ngx-column`): Content should display when column child is active on load.
+
 ## 50.0.0-alpha.4 (2025-07-23)
 
 - Breaking (`ngx-column`): Setting Dynamic Components in `content` now follow declarative syntax to support outputs, two-way data binding

projects/swimlane/ngx-ui/src/lib/components/column/column/column.component.spec.ts

@@ -106,6 +106,43 @@ describe('ColumnComponent', () => {
       });
     });
 
+    it('should display active child with content', () => {
+      const contentChild = {
+        id: '3m',
+        active: true,
+        title: 'Column 3m',
+        children: [
+          {
+            id: '3p',
+            active: true,
+            title: 'Column 3p',
+            content: {
+              component: ColumnTestContentComponent
+            }
+          }
+        ]
+      };
+      spyOn(component, 'displayContent').and.callThrough();
+      component.ngOnChanges({
+        column: {
+          currentValue: contentChild,
+          previousValue: undefined,
+          firstChange: true,
+          isFirstChange: () => true
+        }
+      });
+      expect(component.activeChild).toEqual({
+        id: '3p',
+        active: true,
+        title: 'Column 3p',
+        content: {
+          component: ColumnTestContentComponent
+        }
+      });
+      expect(component.displayContent).toHaveBeenCalled();
+      expect(component.componentRef).toBeDefined();
+    });
+
     it('should set height of scrollable view', () => {
       component.ngOnChanges({
         height: {
@@ -217,6 +254,66 @@ describe('ColumnComponent', () => {
       expect(component.tabClick.emit).toHaveBeenCalledWith({ columnId: activeColumn.id });
     });
 
+    it('should display content on click', () => {
+      const activeColumn = {
+        id: '3o',
+        active: true,
+        title: 'Column 3o',
+        children: [
+          {
+            id: '3p',
+            active: true,
+            title: 'Column 3p',
+            content: {
+              component: ColumnTestContentComponent
+            }
+          }
+        ]
+      };
+      spyOn(component, 'displayContent').and.callThrough();
+      component.ngOnChanges({
+        column: {
+          currentValue: activeColumn,
+          previousValue: undefined,
+          firstChange: true,
+          isFirstChange: () => true
+        }
+      });
+      component.onChildClick('3p');
+      expect(component.displayContent).toHaveBeenCalled();
+      expect(component.componentRef).toBeDefined();
+    });
+
+    it('should display content on keyup', () => {
+      const activeColumn = {
+        id: '3o',
+        active: true,
+        title: 'Column 3o',
+        children: [
+          {
+            id: '3p',
+            active: true,
+            title: 'Column 3p',
+            content: {
+              component: ColumnTestContentComponent
+            }
+          }
+        ]
+      };
+      spyOn(component, 'displayContent').and.callThrough();
+      component.ngOnChanges({
+        column: {
+          currentValue: activeColumn,
+          previousValue: undefined,
+          firstChange: true,
+          isFirstChange: () => true
+        }
+      });
+      component.onChildKeyup({ key: ' ' } as any, '3p');
+      expect(component.displayContent).toHaveBeenCalled();
+      expect(component.componentRef).toBeDefined();
+    });
+
     it('should modify the list on input change', () => {
       const inputEvent = {
         target: {

projects/swimlane/ngx-ui/src/lib/components/column/column/column.component.ts

@@ -43,6 +43,9 @@ export class ColumnComponent implements OnChanges {
         this.activeChild = changes.column.currentValue.children
           ? changes.column.currentValue.children?.find(child => child.active)
           : null;
+        if (this.activeChild?.content && this.activeChild?.content.component) {
+          this.displayContent();
+        }
       }
     }
     if (changes.height?.currentValue) {
@@ -54,11 +57,7 @@ export class ColumnComponent implements OnChanges {
     this.activeChild = this.column().children.find(child => child.id === columnId);
     this.tabClick.emit({ columnId });
     if (this.activeChild?.content && this.activeChild?.content.component) {
-      this.vcr()?.clear();
-      this.componentRef = this.vcr()?.createComponent(
-        this.activeChild.content.component,
-        this.activeChild.content.options || {}
-      );
+      this.displayContent();
     }
   }
 
@@ -67,15 +66,22 @@ export class ColumnComponent implements OnChanges {
       this.activeChild = this.column().children.find(child => child.id === columnId);
       this.tabClick.emit({ columnId });
       if (this.activeChild?.content && this.activeChild?.content.component) {
-        this.vcr()?.clear();
-        this.componentRef = this.vcr()?.createComponent(
-          this.activeChild.content.component,
-          this.activeChild.content.options || {}
-        );
+        this.displayContent();
       }
     }
   }
 
+  displayContent() {
+    if (!this.activeChild || !this.activeChild.content?.component) {
+      return;
+    }
+    this.vcr()?.clear();
+    this.componentRef = this.vcr()?.createComponent(
+      this.activeChild.content.component,
+      this.activeChild.content.options || {}
+    );
+  }
+
   onInputChange(event: KeyboardEvent) {
     const change = (event.target as HTMLInputElement).value;
     if (!change.length) {

src/app/components/column-page/column-page.component.ts

@@ -25,7 +25,7 @@ export class ColumnPageComponent {
             children: [
               {
                 id: '1d',
-                active: false,
+                active: true,
                 title: 'Column 1d',
                 content: {
                   component: ColumnTestContentComponent,