TypeScript 2.x By Example

Task template

The following is the code we have in our task template which provides the user interface for adding the new subTask:

  <div class="add-subTask"            (click)="enableAddsubTask()" >          <input             (keyup)="addsubTaskOnEnter($event)"            (blur)="addsubTaskOnBlur()"            [(ngModel)]="addsubTaskText"            placeholder="Add a new SubTask" />        </div>

As we can see we are handling the same events we handled when adding a new task. We have a click event enableAddsubTask, which will add the focus on the input area as shown in the code here:

  enableAddsubTask() {    let input = this.el.nativeElement      .getElementsByClassName('add-subTask')[0]      .getElementsByTagName('input')[0];    setTimeout(function () { input.focus(); }, 0);  }

Then we have a property in the ...