title: Remove Items from Array - Angular 4
body: <p>I'm working on a simple todo app in Angular4. I have the app setup in the following way:<br/></p>
  
  <p>Form Component: This is the form to add items to the to-do list<br/>
  Item Component: This is the individual component.<br/>
  App Component: I have a *ngFor look here going to list all of the todo items.<br/></p>
  
  <p>I've added a new button on the item component that is supposed to delete the item, however I can't figure out how to "find" or "locate" the correct index number for the item to splice or filter it out.<br/>
  I've included a link to the <a href="https://github.com/gurgeng/ToDo" rel="nofollow noreferrer">github repository here</a></p>
  
  <p>app.component.html:</p>
  
  <pre><code>&lt;app-navbar&gt;&lt;/app-navbar&gt;
  &lt;div class="container"&gt;
    &lt;app-form (itemAdded)="onItemAdded($event)"&gt;&lt;/app-form&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-3 mb-3"
      *ngFor="let item of toDoList; let i=index"&gt;
        &lt;app-item
        [listItem]="item"
        (itemDeleted)="onItemDeleted($event)"&gt;&lt;/app-item&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>app.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    toDoList = [
      {
        name: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
      }
    ];
  
    onItemAdded(itemData: {itemName: string}){
      this.toDoList.push({
        name: itemData.itemName
      });
    }
    onItemDeleted(index: number){
      this.toDoList.splice(index, 1);
    }
  }
  </code></pre>
  
  <p>form.component.html:</p>
  
  <pre><code>&lt;div class="title"&gt;
    &lt;h1 class="display-4"&gt;{{ title }}&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="input-group"&gt;
    &lt;input type="text" class="form-control" [(ngModel)]="newItem"&gt;
    &lt;span class="input-group-btn"&gt;
      &lt;button class="btn btn-success" type="button" (click)="onAddItem()"&gt;
        &lt;fa name="plus"&gt;&lt;/fa&gt;
      &lt;/button&gt;
    &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>form.component.ts:</p>
  
  <pre><code>import { Component, OnInit, Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'app-form',
    templateUrl: './form.component.html',
    styleUrls: ['./form.component.css']
  })
  export class FormComponent implements OnInit {
    @Output() itemAdded = new EventEmitter&lt;{itemName: string}&gt;();
    title = 'To-Do List';
    newItem = '';
  
    constructor() { }
  
    ngOnInit() {
    }
    onAddItem(){
      this.itemAdded.emit({itemName: this.newItem});
    }
  
  }
  </code></pre>
  
  <p>item.component.html:</p>
  
  <pre><code>&lt;div class="task"&gt;
    &lt;div class="mb-5 d-flex justify-content-between"&gt;
      &lt;fa name="circle-o" size="3x"&gt;&lt;/fa&gt;
      &lt;button type="button" name="delete" class="btn btn-danger align-self-end" (click)="onDeleteItem()"&gt;&lt;fa name="trash"&gt;&lt;/fa&gt;&lt;/button&gt;
    &lt;/div&gt;
    {{item.name}}
  &lt;/div&gt;
  </code></pre>
  
  <p>item.component.ts:</p>
  
  <pre><code>import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
  
  @Component({
    selector: 'app-item',
    templateUrl: './item.component.html',
    styleUrls: ['./item.component.css']
  })
  export class ItemComponent implements OnInit {
  
    @Input('listItem') item: {name: string};
    @Output() itemDeleted = new EventEmitter&lt;{index: number}&gt;();
  
    constructor() { }
  
    ngOnInit() {
    }
    onDeleteItem() {
      this.itemDeleted.emit() //need help with this
    }
  }
  </code></pre>