Hi,

You can look at it:

<smart-kanban
  #kanban
  [dataSource]="data"
  [columns]="columns"
  (cardUpdate)="onTaskUpdate($event)">
</smart-kanban>

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-kanban',
  templateUrl: './kanban.component.html'
})
export class KanbanComponent implements OnInit {
  @ViewChild('kanban', { static: false }) kanban: any;

  data: any[] = [];
  columns = [
    { dataField: 'todo', label: 'To Do' },
    { dataField: 'inProgress', label: 'In Progress' },
    { dataField: 'done', label: 'Done' }
  ];

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.loadData();
  }

  loadData() {
    this.http.get<any[]>('https://api.example.com/tasks').subscribe((tasks) => {
      this.data = tasks;
    });
  }

  onTaskUpdate(event: CustomEvent) {
    const { card, oldColumn, newColumn } = event.detail;
    this.http.patch(<code>https://api.example.com/tasks/${card.id}</code>, {
      status: newColumn.dataField
    }).subscribe();
  }
}

Best regards,
Markov

Smart UI Team
https://www.htmlelements.com/