title: Angular: How to update view when Array changes?
body: <p>I have been reading post and googling an answer for this question without any success</p>
  
  <p>I looked into these two links and nothing</p>
  
  <p><a href="https://stackoverflow.com/questions/41180928/angular-doesnt-update-view-when-array-was-changed">Angular doesn&#39;t update view when array was changed</a></p>
  
  <p><a href="https://stackoverflow.com/questions/36589422/updating-html-view-when-angular-array-changed">Updating HTML view when Angular array changed</a></p>
  
  <p>I have two components (siblings) 
  one component add Items and the other lists all items added. The idea is very simple, whenever someone adds an item I want to update the list in order to get that new item.</p>
  
  <pre><code>export class ListItem implements OnInit {
    list: SomeObject[] = [];
  
    constructor(private myService: SomeService) {}
  
    ngOnInit() {
      this.getItems();
    }
  
    getItems(): void {
      this.myService.getDomesticatedPokemons()
        .subscribe((newItems) =&gt; {
          this.list = newItems; // I can see that this line works as expected but the view doesn't get updated though
        });
    }
  }
  
  export class AddItem implements OnInit {
    constructor(private myService: SomeService, private list: ListItem) {}
  
    ngOnInit() {
  
    }
  
    saveItem(aForm: NgForm): void {
      // ...
      // ...
      // ...
      // ...
  
      this.myService.addItem({}).subscribe((result) =&gt; {
        if (result.ok === 1) {
          this.list.getItems();
        } else {
          console.error('Error: ...');
        }
      });
  
  
    }
  }
  </code></pre>
  
  <p>UPDATE:</p>
  
  <p>this is the view:</p>
  
  <pre><code>&lt;!-- This is the list template --&gt;
  &lt;div id="list"&gt;
      &lt;div *ngFor="let item of list" class="item"&gt;
         ...
         ...
         ...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>for the add component there is a form and saveItem() is executed on submit</p>
  
  <p>UPDATE 2:
  I created a <a href="https://stackblitz.com/edit/so-53598976-wtnwt1" rel="nofollow noreferrer">stackblitz</a> this example is working even though I couldn't (or  at least I didn't know how) reproduce my service getting data from server. I commented out "more realistic" code the main component is list.</p>