title: Angular 6 Promise is calling a function twice
body: <p>I'm new to Angular and I'm currently facing an issue with Promises. The function getContents() is called twice when showMoreClickedHandler() is called. On other occasions, getContents() is called only once. I checked the breakpoints and looks like it goes back to line no 1 when const reqGetContentsPromise is undefined. Below is the code. Any help will be much appreciated!</p>
  
  <pre><code>getContents(): Promise&lt;Content[]&gt; {
      console.log('Contents called twice');
      this.getContentsCalled = true;
      this.spinner.show();
  
  
  
      const reqGetContentsPromise = this.salesforceService.getContents(
          this.pageNum,
          this.resultsPerPage,
          this.sortBy,
          this.sortDir,
          this.filterType,
          this.filterVal,
          this.searchVal,
          this.courseId
      );
  
      reqGetContentsPromise.then(
          resData =&gt; {
              this.contents = this.contents.concat(resData);
          },
          err =&gt; {
              this.contents = [];
          }
      );
  
      return reqGetContentsPromise;
  }
  </code></pre>
  
  <p>showMoreClickedHandler(): void {</p>
  
  <pre><code>    console.log('Show more called');
  
      this.pageNum++;
      this.getContents();
      $('#search-content-div').animate({ scrollTop: $('#search-content-div').prop('scrollHeight') }, 500);
  }
  </code></pre>