Breaking: ColumnComponent supports new declarative syntax for dynamic components (#1117)

steveblue · web-flow · commit 8507272d3820 · 2025-07-23T11:11:38.000-07:00
* breaking: dynamic components now use declarative syntax in columns
diff --git a/projects/swimlane/ngx-ui/CHANGELOG.md b/projects/swimlane/ngx-ui/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 ## HEAD (unreleased)
 
+- Breaking (`ngx-column`): Dynamic Components now follow declarative syntax to support outputs, two-way data binding
 - Fix (`ngx-date-range-picker`): Error handling for invalid custom input and updated preset list.
 
 ## 50.0.0-alpha.3 (2025-07-14)
diff --git a/projects/swimlane/ngx-ui/src/lib/components/column/column/column.component.html b/projects/swimlane/ngx-ui/src/lib/components/column/column/column.component.html
@@ -1,10 +1,10 @@
-@if (!column?.content) {
+@if (!column()?.content) {
 <header>
-  <h4>{{ column?.title }}</h4>
+  <h4>{{ column()?.title }}</h4>
 </header>
 }
 <div class="column">
-  @if (column?.children) {
+  @if (column()?.children) {
   <section class="column-list">
     <div class="search">
       <ngx-icon fontIcon="search" class="search-icon pull-left"></ngx-icon>
@@ -16,7 +16,7 @@ <h4>{{ column?.title }}</h4>
         name="searchInputValue"
         placeholder="Search"
         (keyup)="onInputChange($event)"
-        [disabled]="!column.children.length"
+        [disabled]="!column().children.length"
       ></ngx-input>
     </div>
     @if (list) {
@@ -43,15 +43,12 @@ <h4>{{ column?.title }}</h4>
     </cdk-virtual-scroll-viewport>
     }
   </section>
-  } @if (activeChild?.content) {
-  <section class="column-expanded" #expandedSection [ngStyle]="{ width: activeChild.content.width }">
-    <ng-container
-      *ngComponentOutlet="
-        activeChild.content.component;
-        inputs: activeChild.content.inputs ? activeChild.content.inputs : {};
-        module: activeChild.content.module ? activeChild.content.module : {}
-      "
-    ></ng-container>
-  </section>
   }
+  <section
+    class="column-expanded"
+    [ngStyle]="{ width: activeChild?.content?.width }"
+    [ngClass]="{ hidden: !activeChild?.content }"
+  >
+    <ng-container #expandedSection></ng-container>
+  </section>
 </div>
diff --git a/projects/swimlane/ngx-ui/src/lib/components/column/column/column.component.scss b/projects/swimlane/ngx-ui/src/lib/components/column/column/column.component.scss
@@ -112,6 +112,9 @@
 
   section.column-expanded {
     overflow: auto;
+    &.hidden {
+      display: none;
+    }
   }
 
   &:not(.expanded) {
diff --git a/projects/swimlane/ngx-ui/src/lib/components/column/column/column.component.spec.ts b/projects/swimlane/ngx-ui/src/lib/components/column/column/column.component.spec.ts
@@ -122,13 +122,20 @@ describe('ColumnComponent', () => {
   describe('column events', () => {
     beforeEach(() => {
       fixture = TestBed.createComponent(ColumnComponent);
-      component = fixture.componentInstance;
-      component.column = column;
+      fixture.componentRef?.setInput('column', column);
       fixture.detectChanges();
+      component = fixture.componentInstance;
     });
 
     it('should emit column id on click', () => {
-      const activeColumn = column.children[0].children[0];
+      const activeColumn = {
+        id: '3o',
+        active: false,
+        title: 'Column 3o',
+        content: {
+          component: ColumnTestContentComponent
+        }
+      };
       spyOn(component.tabClick, 'emit');
       component.ngOnChanges({
         column: {
@@ -151,7 +158,14 @@ describe('ColumnComponent', () => {
     });
 
     it('should emit column id on keyup', () => {
-      const activeColumn = column.children[0].children[0];
+      const activeColumn = {
+        id: '3o',
+        active: false,
+        title: 'Column 3o',
+        content: {
+          component: ColumnTestContentComponent
+        }
+      };
       spyOn(component.tabClick, 'emit');
       component.ngOnChanges({
         column: {
@@ -174,7 +188,14 @@ describe('ColumnComponent', () => {
     });
 
     it('should emit column id on keyup with space bar', () => {
-      const activeColumn = column.children[0].children[0];
+      const activeColumn = {
+        id: '3o',
+        active: false,
+        title: 'Column 3o',
+        content: {
+          component: ColumnTestContentComponent
+        }
+      };
       spyOn(component.tabClick, 'emit');
       component.ngOnChanges({
         column: {
diff --git a/projects/swimlane/ngx-ui/src/lib/components/column/column/column.component.ts b/projects/swimlane/ngx-ui/src/lib/components/column/column/column.component.ts
@@ -1,11 +1,13 @@
 import {
   Component,
-  EventEmitter,
-  Input,
+  ComponentRef,
+  input,
   OnChanges,
-  Output,
+  output,
   signal,
   SimpleChanges,
+  viewChild,
+  ViewContainerRef,
   ViewEncapsulation
 } from '@angular/core';
 import { Column } from './column.types';
@@ -22,14 +24,15 @@ import { Column } from './column.types';
   }
 })
 export class ColumnComponent implements OnChanges {
-  @Input() column: Column = null;
-  @Input() height: string;
-  @Output() tabClick = new EventEmitter<{ columnId: string }>();
+  column = input<Column | null>(null);
+  height = input<string>('');
+  tabClick = output<{ columnId: string }>();
+  vcr = viewChild('expandedSection', { read: ViewContainerRef });
   scrollerHeight = signal('300');
-
   activeChild: Column = null;
   list: Column[] = [];
   searchInputValue = '';
+  componentRef: ComponentRef<any> | null = null;
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.column?.currentValue) {
@@ -48,28 +51,42 @@ export class ColumnComponent implements OnChanges {
   }
 
   onChildClick(columnId: string) {
-    this.activeChild = this.column.children.find(child => child.id === columnId);
+    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 || {}
+      );
+    }
   }
 
   onChildKeyup(event: KeyboardEvent, columnId: string) {
     if (event.key === 'Enter' || event.key === ' ') {
-      this.activeChild = this.column.children.find(child => child.id === columnId);
+      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 || {}
+        );
+      }
     }
   }
 
   onInputChange(event: KeyboardEvent) {
     const change = (event.target as HTMLInputElement).value;
     if (!change.length) {
-      this.list = this.column.children ? this.column.children : [];
+      this.list = this.column().children ? this.column().children : [];
     } else {
       const query = change.toLowerCase();
-      const results = this.column.children.filter((child: Column) => {
+      const results = this.column().children.filter((child: Column) => {
         return child.title.toLowerCase().includes(query);
       });
       if (!results.length) {
-        this.list = this.column.children ? this.column.children : [];
+        this.list = this.column().children ? this.column().children : [];
         this.activeChild = this.list.find(child => child.active);
       } else {
         this.list = results;
diff --git a/projects/swimlane/ngx-ui/src/lib/components/column/column/column.types.ts b/projects/swimlane/ngx-ui/src/lib/components/column/column/column.types.ts
@@ -1,3 +1,15 @@
+import { Binding, EnvironmentInjector, Injector } from '@angular/core';
+
+export interface ColumnCustomComponentOptions {
+  index?: number;
+  injector?: Injector;
+  ngModuleRef?: any;
+  environmentInjector?: EnvironmentInjector | any;
+  projectableNodes?: Node[][];
+  directives?: any[];
+  bindings?: Binding[];
+}
+
 export interface Column {
   id: string;
   active: boolean;
@@ -7,8 +19,6 @@ export interface Column {
   content?: {
     width?: string;
     component: any;
-    inputs?: any;
-    outputs?: any;
-    module?: any;
+    options?: ColumnCustomComponentOptions;
   };
 }
diff --git a/projects/swimlane/ngx-ui/src/lib/components/column/columns.component.spec.ts b/projects/swimlane/ngx-ui/src/lib/components/column/columns.component.spec.ts
@@ -53,10 +53,10 @@ describe('ColumnsComponent', () => {
 
   beforeEach(() => {
     fixture = TestBed.createComponent(ColumnsComponent);
+    fixture.componentRef?.setInput('column', column);
+    fixture.detectChanges();
     component = fixture.componentInstance;
-    component.column = column;
     component.columns = [];
-    fixture.detectChanges();
   });
 
   it('should be defined', () => {
diff --git a/projects/swimlane/ngx-ui/src/lib/components/column/columns.component.ts b/projects/swimlane/ngx-ui/src/lib/components/column/columns.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, signal, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { Component, input, OnChanges, signal, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { ColumnComponent } from './column/column.component';
 import { Column } from './column/column.types';
 
@@ -15,8 +15,8 @@ import { Column } from './column/column.types';
   }
 })
 export class ColumnsComponent implements OnChanges {
-  @Input() column: Column;
-  @Input() height: string;
+  column = input<Column | null>(null);
+  height = input<string>('');
   columns: Array<Column>;
   columnComponent = ColumnComponent;
   columnHeight = signal('');
@@ -66,7 +66,7 @@ export class ColumnsComponent implements OnChanges {
 
   getCurrentColumns(): Array<Column> {
     const columns = [];
-    return this.traverseActivePath(this.column, columns);
+    return this.traverseActivePath(this.column(), columns);
   }
 
   onColumnNavigation(col: { columnId: string }): void {
diff --git a/src/app/components/column-page/column-page.component.ts b/src/app/components/column-page/column-page.component.ts
@@ -29,7 +29,7 @@ export class ColumnPageComponent {
                 title: 'Column 1d',
                 content: {
                   component: ColumnTestContentComponent,
-                  inputs: {}
+                  options: {}
                 }
               },
               {
@@ -48,7 +48,7 @@ export class ColumnPageComponent {
                         title: 'Column 1g',
                         content: {
                           component: ColumnTestContentComponent,
-                          inputs: {}
+                          options: {}
                         }
                       },
                       {
@@ -57,7 +57,7 @@ export class ColumnPageComponent {
                         title: 'Column 1h',
                         content: {
                           component: ColumnTestContentComponent,
-                          inputs: {}
+                          options: {}
                         }
                       }
                     ]
@@ -116,7 +116,7 @@ export class ColumnPageComponent {
                         title: 'Column 3f',
                         content: {
                           component: ColumnTestContentComponent,
-                          inputs: {}
+                          options: {}
                         }
                       },
                       {
@@ -135,7 +135,7 @@ export class ColumnPageComponent {
                                 title: 'Column 3i',
                                 content: {
                                   component: ColumnTestContentComponent,
-                                  inputs: {}
+                                  options: {}
                                 }
                               },
                               {
@@ -144,7 +144,7 @@ export class ColumnPageComponent {
                                 title: 'Column 3j',
                                 content: {
                                   component: ColumnTestContentComponent,
-                                  inputs: {}
+                                  options: {}
                                 }
                               }
                             ]
@@ -517,9 +517,7 @@ export class ColumnPageComponent {
             title: 'Column 1c',
             content: {
               component: 'ColumnTestContentComponent',
-              inputs: {},
-              outputs: {},
-              module: {}
+              options: {}
             }
           }
         ]
@@ -540,9 +538,7 @@ export class ColumnPageComponent {
                 title: 'Column 2c',
                 content: {
                   component: 'ColumnTestContentComponent',
-                  inputs: {},
-                  outputs: {},
-                  module: {}
+                  options: {}
                 }
               }
             ]

Original file line number	Diff line number	Diff line change
`@@ -112,6 +112,9 @@`
`112`	`112`
`113`	`113`	`section.column-expanded {`
`114`	`114`	`overflow: auto;`
	`115`	`+ &.hidden {`
	`116`	`+ display: none;`
	`117`	`+ }`
`115`	`118`	`}`
`116`	`119`
`117`	`120`	`&:not(.expanded) {`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,7 @@ export class ColumnPageComponent {`
`29`	`29`	`title: 'Column 1d',`
`30`	`30`	`content: {`
`31`	`31`	`component: ColumnTestContentComponent,`
`32`		`- inputs: {}`
	`32`	`+ options: {}`
`33`	`33`	`}`
`34`	`34`	`},`
`35`	`35`	`{`
`@@ -48,7 +48,7 @@ export class ColumnPageComponent {`
`48`	`48`	`title: 'Column 1g',`
`49`	`49`	`content: {`
`50`	`50`	`component: ColumnTestContentComponent,`
`51`		`- inputs: {}`
	`51`	`+ options: {}`
`52`	`52`	`}`
`53`	`53`	`},`
`54`	`54`	`{`
`@@ -57,7 +57,7 @@ export class ColumnPageComponent {`
`57`	`57`	`title: 'Column 1h',`
`58`	`58`	`content: {`
`59`	`59`	`component: ColumnTestContentComponent,`
`60`		`- inputs: {}`
	`60`	`+ options: {}`
`61`	`61`	`}`
`62`	`62`	`}`
`63`	`63`	`]`
`@@ -116,7 +116,7 @@ export class ColumnPageComponent {`
`116`	`116`	`title: 'Column 3f',`
`117`	`117`	`content: {`
`118`	`118`	`component: ColumnTestContentComponent,`
`119`		`- inputs: {}`
	`119`	`+ options: {}`
`120`	`120`	`}`
`121`	`121`	`},`
`122`	`122`	`{`
`@@ -135,7 +135,7 @@ export class ColumnPageComponent {`
`135`	`135`	`title: 'Column 3i',`
`136`	`136`	`content: {`
`137`	`137`	`component: ColumnTestContentComponent,`
`138`		`- inputs: {}`
	`138`	`+ options: {}`
`139`	`139`	`}`
`140`	`140`	`},`
`141`	`141`	`{`
`@@ -144,7 +144,7 @@ export class ColumnPageComponent {`
`144`	`144`	`title: 'Column 3j',`
`145`	`145`	`content: {`
`146`	`146`	`component: ColumnTestContentComponent,`
`147`		`- inputs: {}`
	`147`	`+ options: {}`
`148`	`148`	`}`
`149`	`149`	`}`
`150`	`150`	`]`
`@@ -517,9 +517,7 @@ export class ColumnPageComponent {`
`517`	`517`	`title: 'Column 1c',`
`518`	`518`	`content: {`
`519`	`519`	`component: 'ColumnTestContentComponent',`
`520`		`- inputs: {},`
`521`		`- outputs: {},`
`522`		`- module: {}`
	`520`	`+ options: {}`
`523`	`521`	`}`
`524`	`522`	`}`
`525`	`523`	`]`
`@@ -540,9 +538,7 @@ export class ColumnPageComponent {`
`540`	`538`	`title: 'Column 2c',`
`541`	`539`	`content: {`
`542`	`540`	`component: 'ColumnTestContentComponent',`
`543`		`- inputs: {},`
`544`		`- outputs: {},`
`545`		`- module: {}`
	`541`	`+ options: {}`
`546`	`542`	`}`
`547`	`543`	`}`
`548`	`544`	`]`