title: Angular - Remove item from array on click of that item
body: <p>I'm learning Angular (v6 to be specific), and trying to build a simple to do list. </p>
  
  <p>I'm able to add items to an array and display in a list but cannot figure out how to delete specific items on click of that item. </p>
  
  <p>Current code deletes the entire array on click. Here's my code:</p>
  
  <p>app.component.html</p>
  
  <pre><code> &lt;h1&gt;To Do List&lt;/h1&gt;
    &lt;label for=""&gt;What do you need to to?&lt;/label&gt;
    &lt;input type="text" [(ngModel)]="listItem"&gt;
    &lt;br&gt;
    &lt;button (click)="addToList()"&gt;Add&lt;/button&gt;
    &lt;hr&gt;
    &lt;ul&gt;
      &lt;li *ngFor="let toDo of toDoList" (click)="removeFromList($event)"&gt;{{ toDo }}&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>app.component.ts</p>
  
  <pre><code>export class AppComponent {
    title = 'to-do-list-app';
    listItem = '';
    toDoList = [];
  
    addToList() {
      this.toDoList.push(this.listItem);
    }
  
    removeFromList(addedItem) {
      this.toDoList.splice(addedItem);
    }
  </code></pre>