I am new to Angular and I am trying to create a simple to do list app. When the user inputs an item, it is added to the list. This part of the app works fine. I am now trying to allow the user to delete an item from the list when they click on the 'x' on the list item. 

I have now done this, but when I delete an item from the list, the wrong item in the array is spliced. I believe I need to get the index of the item (or something like this) but i'm not sure exactly how to do this!

Here is the item component html:

```
<div class="row">
    <div class="new-item">
        <p class="desc">{{item.desc}}</p>
        <p class="start">{{item.start}}</p>     
        <p class="end">{{item.end}}</p>
        <button class="btn-danger"><i class="glyphicon glyphicon-remove"></i></button>
    </div>

</div>

```

here is the item component typescript file:

```
import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})
export class ItemComponent implements OnInit {
  @Input() item: {desc: string, start: any, end: any} 

  constructor() { }

  ngOnInit() {
  }

} 

```

here is the html of the parent component:

```
<div class="text-center">
    <h1>To Do List</h1>
</div>
<app-users-input (gotUserInput)="afterUserInput($event)"></app-users-input> 
<br>
<div class="row">
    <div class="list">
        <app-item *ngFor="let item of items" (click)="removeItem(item)" [item]="item"></app-item> 
    </div>
</div>

```

here is the typescript code from the parent component:

```
    import { Component } from '@angular/core';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent {
      items = []; 

    afterUserInput(serverData: {desc: string, start: number, end: number}) { 
      this.items.push({
        desc: serverData.desc,
        start: serverData.start,
        end: serverData.end
    })

    };

removeItem(item) {
  this.items.splice(item, 1);
}

    }

```

There is another component which handles getting the users input. I haven't included this component in my post as I didn't believe it was relevant.