we need to increment the stage property value till stage length array value in and object which is in task array on forward click

// this is my html file

<div class="mt-50 layout-row">
  <div class="card outlined ml-20 mt-0" *ngFor="let tasks of stagesTasks;index as i;">
    <div class="card-text">
      <h4>{{this.stagesNames[i]}}</h4>
      <ul class="styled mt-50" [attr.data-test-id]="'stage-'+ i">
        <li *ngFor="let task of tasks; index as index;">
          <div class="li-content layout-row justify-content-between align-items-center">
              <span [attr.data-test-id]="generateTestId(task.name)+ '-name'">{{task.name}}</span>
              <div class="icons">
                <button class="icon-only x-small mx-2"
                        [attr.data-test-id]="generateTestId(task.name)+ '-back'">
                  <i class="material-icons">arrow_back</i>
                </button>

                <button class="icon-only x-small mx-2"
                        [attr.data-test-id]="generateTestId(task.name)+ '-forward'" (click)="changeTaskState(task)">
                  <i class="material-icons">arrow_forward</i>
                </button>

                <button class="icon-only danger x-small mx-2"
                        [attr.data-test-id]="generateTestId(task.name)+ '-delete'">
                  <i class="material-icons">delete</i>
                </button>
              </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

@Component({
    selector: 'kanban-board',
     templateUrl: './kanbanBoard.component.html',
      styleUrls: ['./kanbanBoard.component.scss']
 })
 export class KanbanBoard implements OnInit {
    tasks: Task[];
    stagesNames: string[];
    stagesTasks: any[]; //Only used for rendering purpose
    taskInput: string;
    taskname: string;
 ngOnInit() {
// Each task is uniquely identified by its name. 
// Therefore, when you perform any operation on tasks, make sure you pick tasks by names 
(primary key) instead of any kind of index or any other attribute.
this.tasks = [
  // { name: '0', stage: 0 },
  // { name: '1', stage: 0 },
  //{ name: this.taskInput, stage: 0 },
];
this.stagesNames = ['Backlog', 'To Do', 'Ongoing', 'Done'];
this.configureTasksForRendering();
}

 // this function has to be called whenever tasks array is changed to construct stagesTasks 
for rendering purpose
 configureTasksForRendering = () => {
 this.stagesTasks = [];
 for (let i = 0; i < this.stagesNames.length; ++i) {
  this.stagesTasks.push([]);
}
for (let task of this.tasks) {
  const stageId = task.stage;
  this.stagesTasks[stageId].push(task);
}

}

// Read input value on button click(create task button)
getTaskName() {
console.log("new task created", this.taskInput);
const taskname = this.taskInput;
console.log(taskname);
let task: any = { name: taskname, stage: 0 };

this.tasks.push(task);
// console.log(this.tasks);
this.configureTasksForRendering();
this.taskInput = "";

//  for (let name of this.tasks) {
//   const taskname = name.name;
//   this.stagesTasks[taskname].push(name);
// }

   }
  changeTaskState(i) {
   //console.log("forward works")

   // console.log(index);
    // console.log(this.tasks[index].stage);
     //this.tasks[index].stage++;
// console.log(this.tasks[index].stage);
// console.log(index);
// console.log(this.stagesTasks);
console.log(i);

console.log(i.stage);


//this.tasks[i].stage++;
//this.generateTestId(i)

this.configureTasksForRendering();

// for (let i = 0; i < this.tasks.length; ++i) {

// }
// for(let task of this.tasks ){

// }
  }


  generateTestId = (name) => {
  // console.log(name)
   //console.log(name.split(' ').join('-'));

  return name.split(' ').join('-');
 }
}
 //task interface
 interface Task {
  name: string;
  stage: number;
 }