title: Asynchronously Load Firebase Database Before ('click')ing button
body: <p>I'm having trouble loading my firebase database before a user clicks a button and fires a function that filters and manipulates the data in my database. I have tried using a promise to asynchronously load the data, but to no avail.
  You can look at my web app and see exactly what I'm talking about here: <a href="https://search-h2-b-employers.firebaseapp.com/" rel="nofollow noreferrer">https://search-h2-b-employers.firebaseapp.com/</a></p>
  
  <p>This is how I have tried to remedy this with a promise:</p>
  
  <p>view:</p>
  
  <pre><code>&lt;button class="button1" id="button1" (click)="addFire()"&gt;Try it&lt;/button&gt;
  </code></pre>
  
  <p>Service:</p>
  
  <pre><code>@Injectable()
  export class DataService {
  ninjas: any;
  
  fire(){
    firebase.database().ref('/H-2B_FY2016').on('child_added', (snapshot) =&gt; {
      this.ninjas.push(snapshot.val())
      });
  }
  
    fetchData(){
      return new Promise((resolve, reject) =&gt; {
        resolve(this.fire)
      });
    }
  
  }
  </code></pre>
  
  <p>component.ts:</p>
  
  <pre><code>addFire(){
  
    this.dataService.fetchData().then(this.myFunction())
  
       //myFunction() is the function that then filters and manipulates the firebase database. 
      //It ends up passing the data into a new array.
    }
  </code></pre>
  
  <p>I've tried all kinds of things and have gotten all kinds of errors from:</p>
  
  <blockquote>
    <p>cannot read property of 'ninjas' undefined"</p>
  </blockquote>
  
  <p>to </p>
  
  <blockquote>
    <p>argument type any[] is not assignable to parameter type '(value: {}) => {} | PromiseLike&lt;{}>'</p>
  </blockquote>
  
  <p>This last one is the error I'm getting now. </p>
  
  <p>Help would be greatly appreciate. Feel like I'm banging my head against a wall.</p>