Remove Items from Array - Angular 4

Question

I'm working on a simple todo app in Angular4. I have the app setup in the following way:

Form Component: This is the form to add items to the to-do list
Item Component: This is the individual component.
App Component: I have a *ngFor look here going to list all of the todo items.

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.
I've included a link to the github repository here

app.component.html:

<app-navbar></app-navbar>
<div class="container">
  <app-form (itemAdded)="onItemAdded($event)"></app-form>
  <div class="row">
    <div class="col-md-3 mb-3"
    *ngFor="let item of toDoList; let i=index">
      <app-item
      [listItem]="item"
      (itemDeleted)="onItemDeleted($event)"></app-item>
    </div>
  </div>
</div>

app.component.ts:

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);
  }
}

form.component.html:

<div class="title">
  <h1 class="display-4">{{ title }}</h1>
</div>
<div class="input-group">
  <input type="text" class="form-control" [(ngModel)]="newItem">
  <span class="input-group-btn">
    <button class="btn btn-success" type="button" (click)="onAddItem()">
      <fa name="plus"></fa>
    </button>
  </span>
</div>

form.component.ts:

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<{itemName: string}>();
  title = 'To-Do List';
  newItem = '';

  constructor() { }

  ngOnInit() {
  }
  onAddItem(){
    this.itemAdded.emit({itemName: this.newItem});
  }

}

item.component.html:

<div class="task">
  <div class="mb-5 d-flex justify-content-between">
    <fa name="circle-o" size="3x"></fa>
    <button type="button" name="delete" class="btn btn-danger align-self-end" (click)="onDeleteItem()"><fa name="trash"></fa></button>
  </div>
  {{item.name}}
</div>

item.component.ts:

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<{index: number}>();

  constructor() { }

  ngOnInit() {
  }
  onDeleteItem() {
    this.itemDeleted.emit() //need help with this
  }
}

I get that you can splice or filter it out the top answer starts off by saying: "First, find the index of the element you want to remove" This is what I'm trying to find out how to do. I want to find out what the index is based on the item they are trying to delete — Gurgen Grigoryan
– Gurgen Grigoryan, Commented Oct 12, 2017 at 13:47
Do not link to external resources without adding a digest of that resource here on Stack Overflow. Bring relevant code here. We should not need to visit your GitHub to help you. — zero298
– zero298, Commented Oct 12, 2017 at 13:47
If you need our help, can you at least show us your code instead of pointing us to somewhere else where we still need to search for your code ourselves? — yqlim
– yqlim, Commented Oct 12, 2017 at 13:48
you don't have any Output in your item Component that is called itemDeleted to write this <app-item (itemDeleted)="onItemDeleted($event)"></app-item> — Mohamed Ali RACHID
– Mohamed Ali RACHID, Commented Oct 12, 2017 at 13:50
@Med_Ali_Rachid I just added the following to my item.component.ts file: @Output() itemDeleted = new EventEmitter<{index: number}>(); — Gurgen Grigoryan
– Gurgen Grigoryan, Commented Oct 12, 2017 at 13:58

Chandru · Accepted Answer · 2017-10-12 13:48:24Z

14

Try like this :

<app-item [listItem]="item" (itemDeleted)="onItemDeleted(i)"></app-item>

onItemDeleted(index){ 
    this.toDoList.splice(index, 1); 
}

answered Oct 12, 2017 at 13:48

Chandru

11.2k6 gold badges43 silver badges54 bronze badges

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

4 Comments

Gurgen Grigoryan Over a year ago

This is exactly what i started of trying to do, but it is saying cannot find name index

JayDeeEss Over a year ago

you might be getting that error because you are not passing "i" in the method onItemDeleted(i) which in the above stated answer he is, try that!

Gurgen Grigoryan Over a year ago

@JayDeeEss So I created the following output: @Output() itemDeleted = new EventEmitter<{index: number}>(); and I'm beginning to write the code for onDeleteItem, but not exactly sure what I should include in it... what I have so far: onDeleteItem() { this.itemDeleted.emit() } I just updated all of the code to include what I have done so far

Gurgen Grigoryan Over a year ago

Nevermind, adding what I added, did the trick, Should I specify what is being emitted? when using: this.itemDeleted.emit()

bryan noriega miguel · Accepted Answer · 2017-10-12 14:16:56Z

4

You can use .filter():

onDeleteItem(id: number) {
    this.list = this.list.filter(item => item.id !== id);
}

or you can user .splice(), but to use it you will need to get the index of the item in the array:

const index: number = functionToGetTheIndex();
this.list.splice(index, 1);

To get the index you can do something like this:

for(var i = 0; i < this.list.length; i++) {
   if(this.list[i].id === id) {
     return i;
   }
}

*Edit: int should be number

edited Oct 12, 2017 at 14:16

answered Oct 12, 2017 at 14:05

bryan noriega miguel

1817 bronze badges

3 Comments

Gurgen Grigoryan Over a year ago

I know I can use both of those methods, what I need to figure out is how to find the index of the current item in the array

bryan noriega miguel Over a year ago

Sorry, didn't see the other two answers while I was posting.

Mohamed Ali RACHID Over a year ago

there is no int type in javascript

H. Hakvoort · Accepted Answer · 2017-10-12 13:47:49Z

0

Without looking at your code, a simple way to delete items from your array.

myArray = myArray.filter(x => x.ITEM !== ITEM);

*Edit: spelling

answered Oct 12, 2017 at 13:47

H. Hakvoort

1611 gold badge2 silver badges14 bronze badges

Comments

Roman Soviak · Accepted Answer · 2017-10-12 14:21:19Z

0

You can use the folowing code :

at the start we announce rowItems :

rowItems: RowItems= new RowItems(0, "", "", new Array<Something>());

.... method in code

deleteRowOfSomething(rowIndex: number) {
        console.log("removing row index: " + rowIndex);
        this.rowItems.splice(rowIndex, 1);
        this.changeDetectorRef.detectChanges();
    }

don`t forget to import libraries for changeDetectorRef.

answered Oct 12, 2017 at 14:21

Roman Soviak

8672 gold badges12 silver badges31 bronze badges

Collectives™ on Stack Overflow

Remove Items from Array - Angular 4

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related