title: View is not updating in Angular 6
body: <p>I have an app where I have a list, and a user can delete items from the list.</p>
  
  <p>Here is the service that holds the initial list and the function that removes items from said list:</p>
  
  <pre><code>    import {Injectable} from '@angular/core';
  
  @Injectable()
  export class Services {
    public items: any[] = [
      {
        title: 'Tarek learns Angular',
        subheading: 'He now knows Angular!',
        subtext: 'He adds another framework to his techstack!',
        avatar: 'https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg',
        date: 'Friday July 20th 2018',
        isNewItem: true
      },
      {
        title: 'Human throws frisbee',
        subheading: 'Dog catches frisbee!',
        subtext: 'Dog is a good boy!',
        avatar: 'https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg',
        date: 'Friday July 20th 2018',
        isNewItem: false
      },
      {
        title: 'Human sdfgsfsdfthrows frisbee',
        subheading: 'Dog cadsfsatches frisbee!',
        subtext: 'Dog is a good bvsdfvsdvoy!',
        avatar: 'https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg',
        date: 'Friday July 20th 2018',
        isNewItem: false
      },
      {
        title: 'Humavsdvsdn throsdvsdvsdvws frisbee',
        subheading: 'Dog cavsddsvstches frisbee!',
        subtext: 'Dog is adsvsdfeegedsf good boy!',
        avatar: 'https://i.kym-cdn.com/entries/icons/original/000/013/564/doge.jpg',
        date: 'Friday July 20th 2018',
        isNewItem: false
      }
    ];
  
    numberOfNewItems: number = this.items.map(function (item) {
      if (item.isNewItem) {
        return item;
      }
    }).length;
  
    deleteItem = (itemObj: { itemTitle: string, itemSubheading: string, itemSubtext: string, itemDate: string }) =&gt; {
      const newItems: any [] = [];
  
      let numberOfFilteredNewItems: number = 0;
  
      const filterUndefined = this.items.map((item) =&gt; {
  
        if (item.title !== itemObj.itemTitle &amp;&amp; item.subheading !== itemObj.itemSubheading) {
          if (item.subtext !== itemObj.itemSubtext &amp;&amp; item.data !== itemObj.itemDate) {
            return item;
          }
        }
      });
  
      for (const item of filterUndefined) {
  
        if (item !== undefined) {
  
          newItems.push(item);
  
          if (item.isNewItem) {
  
            numberOfFilteredNewItems++;
  
          }
  
        }
  
      }
  
      this.items = newItems;
  
      this.numberOfNewItems = numberOfFilteredNewItems;
  
    };
  
    checkItemAsOld = (itemObj: { itemTitle: string, itemSubheading: string, itemSubtext: string, itemDate: string }) =&gt; {
  
      const newItems = this.items.map((item) =&gt; {
  
        if (item.title === itemObj.itemTitle &amp;&amp; item.subheading === itemObj.itemSubheading &amp;&amp; item.subtext === itemObj.itemSubtext &amp;&amp; item.date === itemObj.itemDate) {
          return {title: item.title, subheading: item.subheading, subtext: item.subtext, date: item.date, isNewItem: false};
        } else {
          return item;
  
        }
  
  
      });
  
      let numberOfNewFilteredItems: number = 0;
  
      for (const item of newItems) {
  
        if (item.isNewItem) {
  
          numberOfNewFilteredItems++;
  
        }
  
      }
  
      this.numberOfNewItems = numberOfNewFilteredItems;
  
      this.items = newItems;
  
      console.log(this.numberOfNewItems);
  
      console.log(this.items);
  
    }
  }
  </code></pre>
  
  <p>The <code>deleteItem</code> and <code>checkItemAsOld</code> are operating correctly, and are updating the values. Every time I console.log, it shows <code>this.items</code> and 'this.numberOfNewItems` updating correctly. But for some reason the view is not updating at all. </p>
  
  <p>I made sure that in <code>app.module.ts</code>, I attached the Service to the <code>providers</code> array, and made sure that there were no <code>providers</code> arrays in the other components that could overwrite the providers array in the <code>app.modules.ts</code> file. Here is the <code>app.module.ts</code> file:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  import { AppComponent } from './app.component';
  
  import {ListComponent} from './ListComponent/list.component';
  
  import {HeaderComponent} from './HeaderComponent/header.component';
  
  import {ItemComponent} from './ItemComponent/item.component';
  import {FooterComponent} from './FooterComponent/footer.component';
  
  import {Services} from './services';
  
  @NgModule({
    declarations: [
      AppComponent,
      ListComponent,
      HeaderComponent,
      ItemComponent,
      FooterComponent
    ],
    imports: [
      BrowserModule
    ],
    providers: [Services],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>In <code>app.components.html</code>, I passed down the items as such:</p>
  
  <p><code>&lt;app-list [items]="items" [numberOfNewItems]="numberOfNewItems"&gt;&lt;/app-list&gt;</code></p>
  
  <p>And here is the 'app.component.ts` file:</p>
  
  <pre><code>import {Component, OnInit, Input} from '@angular/core';
  
  import {Services} from './services';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  
  
  export class AppComponent implements OnInit {
  
    @Input() items: { title: string, subheading: string, subtext: string, avatar: string, date: string, isNewItem: boolean }[] = [];
  
    @Input() numberOfNewItems: number;
  
    constructor(private listServices: Services) {
    }
  
    ngOnInit() {
  
      this.items = this.listServices.items;
  
      this.numberOfNewItems = this.listServices.numberOfNewItems;
  
    }
  
  
  }
  </code></pre>
  
  <p>I passed the items array to the <code>list.component.ts</code> file:</p>
  
  <pre><code>        import {Component, Input, EventEmitter} from '@angular/core';
  
      import {ItemModel} from '../ItemComponent/item.model';
      import {Services} from '../services';
  
      @Component({
        selector: 'app-list',
        templateUrl: './list.component.html',
        styleUrls: ['./list.component.css']
      })
  
      export class ListComponent {
        @Input() items: any [];
        @Input() numberOfNewItems: number;
  
        constructor(private listServices: Services) {
        }
  
      }
  </code></pre>
  
  <p>But still the view doesn't update even though <code>this.items</code> updates. Can anyone help me? I am new to Angular.</p>