TypeScript 2.x By Example

The addTask method

The addTask method is the one responsible for adding the task to the Board array, which will then be reflected in the UI. The following is the code for doing so:

  addtask() {    let newID = this.board.task.length + 1;    let newtask = <Task>{      title: this.addtaskText,      id: newID    };    this.board.task.push(newtask);    this.updateBoardWidth();    this.addtaskText = '';  }

Here, first we create a new id for the task by just incrementing on the existing number of the task by 1. Then we create a new object of Task class and assign the id and the task text to the object.

This new object is then added to the board object we have in our Board component.

Because of the two way binding, the UI is updated to reflect the new task on the board.  ...