title: Angular 2 deleting of selected item of an array in Child component
body: <p>I have an array of elements and each array item has one Delete link on click of which I want the selected array item to be deleted. I am pushing the objects into the array already and able to get the data.</p>
  
  <p>The code I am using is mentioned below.</p>
  
  <p>Child Component-</p>
  
  <pre><code>@Component({
    selector: 'child',
    template: `
      &lt;div&gt;
        {{element.name}}
        &lt;span (click)="deleteElement()"&gt;Delete&lt;/span&gt;
      &lt;/div&gt;
    `
  })
  export class ChildComponent {
    @Input()
    element: any;
    @Output()
    elementDeleted: EventEmitter&lt;any&gt; = new EventEmitter();
  
    deleteElement() {
      this.elementDeleted.emit();
    }
  }
  </code></pre>
  
  <p>My Parent component-</p>
  
  <pre><code>@Component({
    selector: 'child',
    template: `
      &lt;div&gt;
        &lt;child *ngFor="let element of elements; let i= index;" [element]="element" (elementDeleted)="onElementDeleted(element)"&gt;
        &lt;/child&gt;
      &lt;/div&gt;
    `
  })
  export class ParentComponent {
    constructor() {
      this.elements = [
        { name: 'element1' },
        { name: 'element2' },
        (...)
      ];
    }
  
    onElementDeleted(element) {
      var index = this.elements.findIndex((elt) =&gt; (elt===element));
      if (index != -1) {
        this.elements.splice(index, 1);
      }
    }
  </code></pre>
  
  <p>Right now, every time the last item of the array is getting deleted instead of deleting the selected item.For ex. If i click on  Delete link for the 0th or 1st index, still the last item is being deleted. I am not sure where I am going wrong.</p>