title: Angular 2 Show and Hide an element
body: <p>I'm having a problem hiding and showing an element depending of a boolean variable in Angular 2.</p>
  
  <p>this is the code for the div to show and hide:</p>
  
  <pre><code>&lt;div *ngIf="edited==true" class="alert alert-success alert-dismissible fade in" role="alert"&gt;
          &lt;strong&gt;List Saved!&lt;/strong&gt; Your changes has been saved.
  &lt;/div&gt;
  </code></pre>
  
  <p>the variable is "edited" and it's stored in my component:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class AppComponent implements OnInit{
  
    (...)
    public edited = false;
    (...)
    saveTodos(): void {
     //show box msg
     this.edited = true;
     //wait 3 Seconds and hide
     setTimeout(function() {
         this.edited = false;
         console.log(this.edited);
     }, 3000);
    }
  }
  </code></pre>
  
  <p>The element is hidden, when saveTodos function starts, the element is shown, but after 3 seconds, even if the variable come back to be false, the element does not hide. Why?</p>