title: Using non-instantiated values in Angular
body: <pre><code>&lt;ul class="todo-list"&gt;
        &lt;li *ngFor="let todo of todos" [ngClass]="{completed: todo.isDone, editing: todo.editing}" &gt;
          &lt;div class="view"&gt;
            &lt;input class="toggle"
              type="checkbox"
              [checked]="todo.isDone"
              (click)="toggleTodo(todo)"&gt;
            &lt;label (dblclick)="todo.editing = true"&gt;{{todo.title}}&lt;/label&gt;
            &lt;button class="destroy" (click)="destroyTodo(todo)"&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;input class="edit"
                 #updatedTodo
                 [value]="todo.title"
                 (blur)="updateTodo(todo, updatedTodo.value)"
                 (keyup.escape)="todo.editing = false"
                 (keyup.enter)="updateTodo(todo, updatedTodo.value)"&gt;
        &lt;/li&gt;
  
  &lt;/ul&gt;
  </code></pre>
  
  <p><a href="https://github.com/amejiarosario/angular-todo-app/blob/master/src/app/todo/todo.component.html" rel="nofollow noreferrer">https://github.com/amejiarosario/angular-todo-app/blob/master/src/app/todo/todo.component.html</a></p>
  
  <p>I modified the code from this repository and one thing I noticed is that the editing property is not found in the original todos array objects, and is being created inside the html component or maybe elsewhere, I am thinking it's being instantiated in the event listeners, but is it a good idea to do that? I had trouble with it, so I had to instantiate it inside the todos.</p>
  
  <p>Also, instantiating it here in the event listeners means we can't modify the property editing inside the service component, right?</p>