Implementing the view

To display todos, we shall make use of:

  • Angular's *ngFor directive, which iterates over the todos array and renders an instance of this template for each todo in that array
  • Angular's interpolation binding syntax, {{}}

Update todos.component.html:

<div class="container"><form (submit) = "addTodos($event)"><input type="text"class="form-control" placeholder="action"[(ngModel)] ="action" name="action"><button type="submit"><h4>Submit</h4></button></form><div *ngFor="let todo of todos"><div class="container"><p (click)="updateStatus(todo)" [ngStyle]="{ 'text-decoration': todo.isDone ? 'line-through' : ''}" >Action: {{todo.action}}</p>{{todo.isDone}}<button (click) ="deleteTodo(todo._id)" >Delete</button></div></div></div> ...

Get TypeScript 2.x for Angular Developers now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.