title: *ngIf doesn't delete the element when False, creates new one when True
body: <p>I am just starting with Angular and have a problem with <code>*ngIf</code></p>
  
  <p>When the app starts, <code>*ngIf="item.done"</code> correctly displays (or not displays) the element based on whether the ToDo <code>item</code> is <code>done</code>. However, when I click on the element, the <code>done</code> state <em>changes</em> (I am console.logging it), but the element <em>doesn't</em> disappear, whatever the state. Instead, when the state goes back to <code>done</code>, it creates the same element again. </p>
  
  <p><a href="https://i.stack.imgur.com/yykOF.png" rel="nofollow noreferrer">My HTML template</a></p>
  
  <p><a href="https://i.stack.imgur.com/HrHkM.png" rel="nofollow noreferrer">The <code>onTick()</code> function</a> that changes the <code>item.done</code> state</p>
  
  <ol>
  <li><code>item.done = false</code> <strong>Hidden</strong> <a href="https://i.stack.imgur.com/yy8DL.png" rel="nofollow noreferrer">Screenshot</a></li>
  <li>1st click –> <code>item.done = true</code> <strong>Shown</strong></li>
  <li>2nd click –> <code>item.done = false</code> <strong>Shown</strong></li>
  <li>3rd click –> <code>item.done = true</code> <strong>Shown TWICE</strong> <a href="https://i.stack.imgur.com/0gq4O.png" rel="nofollow noreferrer">Screenshot</a> </li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// MOCK DATA
  
  import { Item } from './item';
  
  export const ITEMS: Item[] = [
    {id: 1, title: 'Buy Milk', done: false},
    {id: 2, title: 'Do Math', done: true},
    {id: 3, title: 'Cook food', done: false}
  ]
  
  
  
  // THE COMPONENT TypeScript
  
  import { Component, OnInit } from '@angular/core';
  import { ITEMS } from './mock-items';
  import { Item } from './item';
  
  @Component({
    selector: 'app-list',
    templateUrl: './list.component.html',
    styleUrls: ['./list.component.css']
  })
  export class ListComponent implements OnInit {
    items: Item[] = [];
  
    constructor() {
      this.items = ITEMS
    }
  
    ngOnInit() {
    }
  
    onTick(item) {
      console.log('Item was: ', item.done)
      item.done = !item.done
      console.log('Item became: ', item.done)
  
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- THE COMPONENT HTML --&gt;
  &lt;div class="list"&gt;
    &lt;div class="list--header"&gt;
      &lt;h1&gt;List&lt;/h1&gt;
    &lt;/div&gt;
  
    &lt;div class="list--content"&gt;
      &lt;ul class="list--items"&gt;
        &lt;li *ngFor="let item of items"&gt;
          &lt;div class="checkbox" (click)="onTick(item)"&gt;
            &lt;input type="checkbox" style="display: none"&gt;
            &lt;i *ngIf="item.done" class="tick fas fa-check"&gt;&lt;/i&gt;
          &lt;/div&gt;
          {{item.title}}
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  
    &lt;div class="list--footer"&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>