Dynamically change columns in Angular Kanban component

27 Sep 20233 minutes to read

You can dynamically change the Kanban columns by using the columns property.

In the below sample, you can dynamically change the allowToggle property at the particular column when you click on the button. You can also change the initially created columns to the new Kanban columns by using the columns property when you click on the button.

app.component.ts

import { Component, ViewChild } from '@angular/core';
import { KanbanComponent, CardSettingsModel } from '@syncfusion/ej2-angular-kanban';
import { kanbanData } from './datasource';

@Component({
  selector: 'app-root',
  template: `<button ejs-button class="e-btn" id="particularColumn" (click)='toggle()'>Enable Allow Toggle</button>
            <button ejs-button class="e-btn" id="column" (click)='change()'>Change Columns</button>
            <ejs-kanban #kanbanObj keyField='Status' [dataSource]='data' [cardSettings]='cardSettings'>
                <e-columns>
                  <e-column headerText='To do' keyField='Open'></e-column>
                  <e-column headerText='In Progress' keyField='InProgress'></e-column>
                  <e-column headerText='Testing' keyField='Testing'></e-column>
                  <e-column headerText='Done' keyField='Close'></e-column>
                </e-columns>
            </ejs-kanban>`
})
export class AppComponent {
    @ViewChild("kanbanObj") kanbanObj?: KanbanComponent;
    public data: Object[] = kanbanData;
    public cardSettings: CardSettingsModel = {
        contentField: 'Summary',
        headerField: 'Id'
    };
    public toggle = (): void => {
        (this.kanbanObj as KanbanComponent).columns[1].allowToggle = true;
    }
    public change = (): void => {
        (this.kanbanObj as KanbanComponent).columns = [
            { headerText: 'To Do', keyField: 'Open' },
            { headerText: 'Done', keyField: 'Close' }
        ]
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { KanbanModule } from '@syncfusion/ej2-angular-kanban';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        KanbanModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);