Angular - Remove item from array on click of that item

Question

I'm learning Angular (v6 to be specific), and trying to build a simple to do list.

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.

Current code deletes the entire array on click. Here's my code:

app.component.html

 <h1>To Do List</h1>
  <label for="">What do you need to to?</label>
  <input type="text" [(ngModel)]="listItem">
  <br>
  <button (click)="addToList()">Add</button>
  <hr>
  <ul>
    <li *ngFor="let toDo of toDoList" (click)="removeFromList($event)">{{ toDo }}</li>
  </ul>

app.component.ts

export class AppComponent {
  title = 'to-do-list-app';
  listItem = '';
  toDoList = [];

  addToList() {
    this.toDoList.push(this.listItem);
  }

  removeFromList(addedItem) {
    this.toDoList.splice(addedItem);
  }

$event doesn't work like this. You should pass toDo or toDo's index to your function and work with it. — Ivan
– Ivan, Commented Aug 27, 2018 at 15:48

Martin Parenteau · Accepted Answer · 2018-08-27 16:11:49Z

8

Pass the item index to splice and specify that one item is to be removed:

<li *ngFor="let toDo of toDoList; let i = index" (click)="toDoList.splice(i, 1)">

See this stackblitz for a demo.

edited Aug 27, 2018 at 16:11

answered Aug 27, 2018 at 15:46

Martin Parenteau

74k13 gold badges137 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eric Nguyen Over a year ago

Thanks! Although the below options also works, this is the more elegant approach. I just learned this index method, but did not think of it in this project.

Jorgel · Accepted Answer · 2018-08-27 15:45:32Z

0

On your click function send the object you are removing:

<li *ngFor="let toDo of toDoList" (click)="removeFromList(toDo)">{{ toDo }}</li>

And in your function, find the index of the element, and then use splice to remove it

removeFromList(addedItem) {
    var index = this.toDoList.indexOf(addedItem);

    this.toDoList.splice(index, 1); // Removes one element, starting from index
}

answered Aug 27, 2018 at 15:45

Jorgel

9303 gold badges14 silver badges30 bronze badges

2 Comments

Eric Nguyen Over a year ago

This works. I was passing ($event) instead of (toDO)

Ivan Over a year ago

This is bad solution. You have indexes in ngFor, there is no need to find it with indexOf. You get performance overhead and bugs in case of duplicate items.

Santiago Robledo · Accepted Answer · 2018-08-27 16:02:48Z

Splice will remove the item from the array by index (and how many items you want to remove), not by value.

To work with arrays and collections, I would suggest to use https://underscorejs.org/ I know it may be an overkill for this problem, but will be useful for more complex scenarios.

You can add the library to your angular project by running the following command:

npm i underscore --save

You may want to also add the typings by running:

npm i @types/underscore --save-dev

Your app.component.ts would then look like

import { Component } from '@angular/core';
import * as _ from 'underscore';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'to-do-list-app';
  listItem = '';
  toDoList = [];

  addToList() {
    this.toDoList.push(this.listItem);
  }
  removeFromList(addedItem) {
    this.toDoList = _.without(this.toDoList, addedItem);
  }
}

And your app.component.html will look like:

<h1>To Do List</h1>
<label for="">What do you need to to?</label>
<input type="text" [(ngModel)]="listItem">
<br>
<button (click)="addToList()">Add</button>
<hr>
<ul>
  <li *ngFor="let toDo of toDoList" (click)="removeFromList(toDo)">{{ toDo }}</li>
</ul>

Collectives™ on Stack Overflow

Angular - Remove item from array on click of that item

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related