nomanHasan
9/15/2017 - 9:49 PM

app.component.html

<table class="table">
        <thead class="h">
          <tr class="h">
            <th class="h">Title</th>
            <th class="h">Description</th>
            <th class="h">Date</th>
            <th class="h">Status</th>
            <th class="h">Options</th>
          </tr>
        </thead>
        <tbody>
          <tr class="todo" (dblclick)="editTodo(todo)" *ngFor="let todo of todosList">

            <ng-container *ngIf="!editTodos.includes(todo); else editTD">
              <td>{{todo.title}}</td>
              <td>{{todo.description}}</td>
              <td>{{todo.date | date}}</td>
              <td>{{todo.status}}</td>
            </ng-container>

            <ng-template #editTD>
                <td><input type="text" name="title" id="title" (keypress)="submitTodo($event, todo)" [(ngModel)]="todo.title" placeholder="Title" class="form-control"></td>
                <td><input type="text" name="description" id="description" (keypress)="submitTodo($event, todo)" [(ngModel)]="todo.description" placeholder="Description"
                    class="form-control"></td>
                <td>{{todo.date | date}}</td>
                <td>
                  <input type="text" name="status" id="status" (keypress)="submitTodo($event, todo)" [(ngModel)]="todo.status" placeholder="Status" class="form-control">
                </td>
            </ng-template>

            <td class="o">
              <button class="btn btn-success" (click)="doneTodo(todo)">
                <i  class="fa fa-check"></i>
              </button>
              <button class="btn btn-primary" (click)="editTodo(todo)">
                  <i  class="fa fa-pencil"></i>
                </button>
              <button class="btn btn-danger" (click)="deleteTodo(todo)">
                  <i  class="fa fa-trash"></i>
                </button>
            </td>

          </tr>
        </tbody>
      </table>