title: Angular 4 does not update an array when I push some data from a response after post
body: <p>I have a <strong>POST</strong> method that the user will post an data to the server. The <strong>POST</strong> method is successfully working but I don't want to refresh my page after posting instead I want to update the array that I am looping through.</p>
  
  <p>I want to update that array using the <code>push</code> method of an <strong>array</strong> base from the response of the post. My end goal here is to update the <strong>posts</strong> without refreshing the page like a real time update.</p>
  
  <p>So here is what I have done so far.</p>
  
  <pre><code>posts: any = [];
  fake_post: any = [];
  success: boolean = false;
  </code></pre>
  
  <p>In my <strong>constructor</strong></p>
  
  <pre><code>events.subscribe('post:created-successfully', (data) =&gt; {
        const promise = Promise.resolve(data)
        promise.then(() =&gt; this.success = true).then(() =&gt; this.fake_post = [])
        .then(() =&gt; setTimeout(() =&gt; { this.success = false }, 1000))
        .then(data =&gt; this.posts.push(data))
        .then(() =&gt; console.log(this.posts))
      });
  </code></pre>
  
  <p>and in my <code>submit()</code> method:</p>
  
  <pre><code>submit() {
      this.showLoader();
      if (this.form.value.title &amp;&amp; this.form.value.author) {
        this.loading.dismiss();
        this.data = this.form.value;
        console.log(this.data);
        this.view.dismiss( this.data );
        this.postApiProvider.createPost(this.data).then((response : addReponse) =&gt; {
          console.log('Provider response', response);
          this.data = response;
        })
        .then(() =&gt; this.events.publish('post:created-successfully', this.data))
        .then(() =&gt; this.presentToast(this.data))
        .catch(err =&gt; console.log(err));
      } else {
        console.log('Something went wrong.')
      }
    }
  </code></pre>
  
  <p>when I want <code>console.log</code> the <strong>array</strong> after the <code>push</code> method of an array this is what I got:</p>
  
  <pre><code>0
  :
  {title: "Async and Await", author: "Jayz", id: 1}
  1
  :
  {title: "Promises", author: "Jayz", id: 2}
  2
  :
  {title: "Callbacks", author: "Jayz", id: 3}
  3
  :
  {title: "1234", author: "1234", id: 4}
  4
  :
  135
  </code></pre>
  
  <p>That <code>indexOf</code> 4 id in the array is the post that I had created but I didn't return an object.</p>
  
  <p>So how would I deal with this?</p>
  
  <p>And as a bonus how can I refactor my <strong>promises</strong> using <strong>async and await</strong>?</p>
  
  <p>Appreciate if someone could help.
  Thanks in advance.</p>