title: Delayed reaction to click event
body: <p>I have a component with an Add button that will go to the database, add a new record, then update the observable's data. The function to add the new record is a Promise that resolves once the new record has been added. While the component is reaching out to the database, I'd like to hide the Add button until the new record has been added. The template and component look roughly as follows:</p>
  
  <p><strong>Template</strong>:</p>
  
  <pre><code>&lt;table&gt;
  ...
  &lt;/table&gt;
  
  &lt;button (click)="addRow()" *ngIf="!addingRow"&gt;Add New&lt;/button&gt;
  </code></pre>
  
  <p><strong>Component Class (typescript)</strong>:</p>
  
  <pre><code>export class AuctionComponent {
    addingRow: boolean = false;
  
    addRow() {
      this.addingRow=true;
      console.log('Adding Row');
      this.salesSvc.addBid()
        .then(()=&gt; {
          this.addingRow = false;
          console.log('finished');
         });
    }
  }
  </code></pre>
  
  <p>The promise to add the new record resolves in roughly one second. This is what I would think would happen:</p>
  
  <ul>
  <li>Click on Add Button</li>
  <li>{button disappears}</li>
  <li>"Adding Row" shows up in the console</li>
  <li>{wait a second for the promise to resolve}</li>
  <li>{button reappears}</li>
  <li>"finished" shows up in the console</li>
  </ul>
  
  <p>Here is what is actually happening:</p>
  
  <ul>
  <li>Click on Add Button</li>
  <li>"Adding Row" shows up in the console</li>
  <li>{wait for a second for the promise to resolve}</li>
  <li>"finished" shows up in the console</li>
  <li>{button disappears briefly &amp; reappears}</li>
  </ul>
  
  <p>I've tried using ngZone.run(), ChangeDetectorRef .markForCheck() &amp; .detectChanges(), and setTimeout(). I've also played around with ChangeDetectionStrategy of Default &amp; OnPush. What am I missing?</p>
  
  <p><strong>Update</strong></p>
  
  <p>So the promise is reaching out and saving the data to firebase. Something with having to do with resolving the promise in firebase seems to be holding this up. </p>
  
  <p>I changed the component to just test the promise part of it:</p>
  
  <pre><code>export class AuctionComponent {
    addingRow: boolean = false;
  
    addRow() {
      this.addingRow=true;
      console.log('Adding Row');
    //  this.salesSvc.addBid()
      this.promise()
        .then(()=&gt; {
          this.addingRow = false;
          console.log('finished');
         });
    }
  
    promise() {
      return new Promise((resolve, reject) =&gt; {
        setTimeout(resolve, 2000);
      });
    }
  }
  </code></pre>
  
  <p>Doing this makes the button behave just like I anticipated.</p>
  
  <p>The addBid method in the service looks like the following (<code>this.af</code> is AngularFire):</p>
  
  <pre><code>  addBid(sale: ISale) {
      return this.af.database.list(`sales/${sale.year}/bids`)
          .push({lot: null, price: 0, description: ''});
    }
  </code></pre>
  
  <p>So I thought that maybe something is happening with the firebase flavor of promise, so I wrapped the whole thing in my own promise:</p>
  
  <pre><code>  addBid(sale: ISale) {
      return new Promise((resolve, reject) =&gt; {
        this.af.database.list(`sales/${sale.year}/bids`)
          .push({lot: null, price: 0, description: ''})
          .then(() =&gt; resolve())
          .catch(() =&gt; reject());
      });   
    }
  </code></pre>
  
  <p>But again, I'm still getting the delayed response. Is there something in firebase/angularfire2 that's causing the repaint to not happen?</p>