title: Angular - How to trigger a *ngFor directive again after pushing some datas in an array?
body: <p>I am adding an object in my array after a request. Everything goes well but I want the new datas to be displayed at the same time the response is received. When I receive the response, I push the new object in my array used to display messages in my view.</p>
  
  <p>I tried to use <code>ChangeDetectorRef</code> (detectChanges() method) and <code>NgZone</code> (run() method) without success. Basically I want my view to go again on the ngFor to display the last message when sending it.</p>
  
  <p>I searched on internet but couldn't find any answer for Angular except for one thread that didn't work.</p>
  
  <p>Here's the part of my code where I want to trigger the rendering of the messages:</p>
  
  <pre><code>this.chatRequestService.send(this.navParams.get('id_chat'), nmMessage, this.token.value).subscribe(
              (result) =&gt; {
                this.messages.push(result);
              },
              (error) =&gt; {
                console.log(error);
              }
            );
  </code></pre>
  
  <p>Here's my ngFor directive in the template: </p>
  
  <pre><code>&lt;ng-container *ngFor="let message of messages[0]"&gt;
          &lt;ion-row&gt;
              &lt;ion-col col-1 class="round-right"&gt;&lt;ion-avatar item-start&gt;&lt;img src="assets/imgs/BK.png" alt="Burger King" title="Burger King"&gt;&lt;/ion-avatar&gt;&lt;/ion-col&gt; &lt;!-- remplacer par {{message[0]?.sender.profileImageUrl}} --&gt;
              &lt;ion-col col-9&gt;
                  &lt;div *ngIf="currentUser == message?.sender.id else elseBlock1" class="talk-bubble round-left me"&gt;
                      &lt;div class="talktext"&gt;
                          &lt;h5&gt;{{message?.sender.username}}&lt;/h5&gt;
                          &lt;p&gt;{{message?.content}}&lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;ng-template #elseBlock1&gt;
                      &lt;div class="talk-bubble round-left"&gt;
                          &lt;div class="talktext"&gt;
                              &lt;h5&gt;{{message?.sender.username}}&lt;/h5&gt;
                              &lt;p&gt;{{message?.content}}&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/ng-template&gt;
              &lt;/ion-col&gt;
          &lt;/ion-row&gt;
      &lt;/ng-container&gt;
  </code></pre>
  
  <p>Thank in advance to anyone who will take the time to read/answer.</p>