CODEWITHSUNDEEP
javascriptarraysangulartypescript
Gurgen Grigoryan
Gurgen Grigoryan

Reputation: 265

Remove Items from Array - Angular 4

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

Upvotes: 2

Views: 57955

Answers (4)

Roman Soviak
Roman Soviak

Reputation: 869

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.

Upvotes: 0

bryan noriega miguel
bryan noriega miguel

Reputation: 181

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

Upvotes: 4

Chandru
Chandru

Reputation: 11184

Try like this :

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

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

Upvotes: 14

H. Hakvoort
H. Hakvoort

Reputation: 161

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

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

*Edit: spelling

Upvotes: 0

Related Questions