Temp

                
import { Component } from '@angular/core';
interface Task {
  title: string;
  stage: number; // 0 = Backlog, 1 = To Do, 2 = Ongoing, 3 = Done
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  stages: string[] = ['Backlog', 'To Do', 'Ongoing', 'Done'];
  tasks: Task[] = [];
  newTaskTitle: string = '';
  selectedTask: Task | null = null;
  addTask() {
    if (this.newTaskTitle.trim()) {
      this.tasks.push({ title: this.newTaskTitle.trim(), stage: 0 });
      this.newTaskTitle = '';
    }
  }
  selectTask(task: Task) {
    this.selectedTask = task;
  }
  moveForward() {
    if (this.selectedTask && this.selectedTask.stage < 3) {
      this.selectedTask.stage++;
    }
  }
  moveBack() {
    if (this.selectedTask && this.selectedTask.stage > 0) {
      this.selectedTask.stage--;
    }
  }
  deleteTask() {
    if (this.selectedTask) {
      this.tasks = this.tasks.filter(t => t !== this.selectedTask);
      this.selectedTask = null;
    }
  }
  getTasksByStage(stage: number): Task[] {
    return this.tasks.filter(task => task.stage === stage);
  }
}
<div class="controls">
  <input [(ngModel)]="newTaskTitle" placeholder="New Task" />
  <button (click)="addTask()">Add Task</button>
  <p>Selected Task: {{ selectedTask?.title || 'None' }}</p>
  <button (click)="moveBack()" [disabled]="!selectedTask || selectedTask.stage === 0">Move Back</button>
  <button (click)="moveForward()" [disabled]="!selectedTask || selectedTask.stage === 3">Move Forward</button>
  <button (click)="deleteTask()" [disabled]="!selectedTask">Delete</button>
</div>
<div class="board">
  <div class="column" *ngFor="let stage of stages; let i = index">
    <h2>{{ stage }}</h2>
    <div
      class="task"
      *ngFor="let task of getTasksByStage(i)"
      [class.selected]="task === selectedTask"
      (click)="selectTask(task)">
      {{ task.title }}
    </div>
  </div>
</div>
.controls {
  margin-bottom: 20px;
}
.board {
  display: flex;
  justify-content: space-between;
}
.column {
  width: 23%;
  padding: 10px;
  border: 1px solid #ccc;
  background-color: #f7f7f7;
  border-radius: 4px;
}
.task {
  background-color: #fff;
  margin: 5px 0;
  padding: 10px;
  border: 1px solid #ddd;
  cursor: pointer;
  border-radius: 4px;
}
.task.selected {
  background-color: #d3e5ff;
  border-color: #2a7ae2;
}