title: Angular 10 - View doesn't update when model is modified
body: <p>Angular 10.1.6, TypeScript 4.0.5</p>
  <p>Hello</p>
  <h2>Context</h2>
  <p>In my webapp, I have 3 components.</p>
  <p><strong>Component A</strong> stores an <code>Array&lt;Image&gt;</code></p>
  <pre><code>export class ComponentParentA implements OnInit {
    images: Array &lt;Image&gt; ;
  
    addImageToList(newImage: Image) {
      this.images.push(newImage)
    }
  }
  </code></pre>
  <p><strong>The Component C</strong> displays the list of images.</p>
  <pre><code>export class ComponentChildC implements OnInit {
  
    @Input() images: Array &lt;Image&gt;;
  }
  </code></pre>
  <p>The component C is called from the Component A html template like this :</p>
  <pre><code>&lt;ComponentChildC [images]=&quot;images&quot;&gt;&lt;/ComponentChildC&gt;
  </code></pre>
  <p><strong>Component B</strong> is in charge to contact my API, add an image which has been selected previously. The API return an Image object, which correspond to my model. The component emit the Image so the ComponentA add the returned image to its Array (Calling addImageToList)<br />
  addImage is an Observable return by this.http.post (<a href="https://angular.io/api/common/http/HttpClient" rel="nofollow noreferrer">HttpClient</a>)</p>
  <pre><code>export class ComponentChildB implements OnInit, AfterViewInit {
    @Output() eventCreateImage : EventEmitter&lt;Image&gt;;
  
    addImage(data) {
      this.service.addImage(data).subscribe((image) =&gt; {
          this.eventCreateImage.emit(image)
        })
    }
  
  }
  </code></pre>
  <p>Component A calls Component B like this :</p>
  <pre><code>&lt;ComponentChildB (eventCreateImage)=&quot;addImageToList($event)&quot;&gt;&lt;/ComponentChildB&gt;
  </code></pre>
  <h2>Problem</h2>
  <p>The Component B add an image when I click on a button. This click trigger the <code>addImage</code> function. All the component work correctly and the image is save on my server. The API returns the image and the latter is correctly stored in the Array in Component A. However, the view of the component C is not updated and the newly created image doesn't appear. If I click a second time on the button, a new image is stored. This time, the previous image, which I couldn't see previously, appears correctly. The new image don't.</p>
  <p>I would like the image to appear directly.</p>
  <h2>What I already did</h2>
  <p>I saw similar issues on the web.</p>
  <ul>
  <li><a href="https://www.jeffryhouser.com/index.cfm/2019/4/2/Why-didnt-my-Angular-View-Update-when-I-added-items-to-the-input-array" rel="nofollow noreferrer">First</a>, I tried to replace <code>this.images.push(newImage)</code> by <code>this.images = this.images.concat(newImage)</code> in <code>addImageToList</code> function. It doesn't work.</li>
  <li>Next, I saw that, because images is an array, Angular doesn't detect any change when I add a new Image in my array. I made my Component C implements the OnChange interface. Effectively, the ngOnChange function is not called.</li>
  <li>I saw <a href="https://angular.io/guide/lifecycle-hooks#docheck" rel="nofollow noreferrer">here</a> that I could try to reload my component manually So I made my Component C implement DoCheck. Something strange appeared. When I click on the button and I do <code>console.log(this.images)</code> in ngDoCheck in component C, I see that the list is correctly updated. But the image still doesn't appear. So I try to call <a href="https://angular.io/api/core/ChangeDetectorRef" rel="nofollow noreferrer">ChangeDetectorRef</a> methods like markForCheck and detectChanges to notify the component of the change, but it didn't work.</li>
  </ul>
  <p>If you have any idea where my problem may be coming from, I would be grateful if you could help me</p>