Angular Delete Item from Array Examples

Hi All,

This article is focused on angular remove item from array by value. i would like to show you angular remove item from array splice. you will learn angular remove item from array by key. if you have question about angular remove element from array then i will give simple example with solution.

We will remove item from array in angular 6, angular 7, angular 8 and angular 9 application.

I will give you four example of how to remove item from array in angular application. so it will help you easily. so let's see bellow example. let's see bellow example that will help you to delete item from array.

Angular Remove Element from Array by Index

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  template: `<div>
      <div *ngFor="let value of myArray; let myIndex=index;">
        {{ value }} <button (click)="removeItem(myIndex)">Remove</button>
      </div>
  </div>`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
    
  myArray = [1, 2, 3, 4, 5];
  
  removeItem(index){
    this.myArray.splice(index, 1);
  }
}

Angular Remove Element from Array by Value

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  template: `<div>
      <div *ngFor="let value of myArray;">
        {{ value }} <button (click)="removeItem(value)">Remove</button>
      </div>
  </div>`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
   
  myArray = [1, 2, 3, 4, 5];
   
  removeItem(value){
    const index: number = this.myArray.indexOf(value);
    this.myArray.splice(index, 1);
  }
}

Angular Delete Item from Array by Object

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  template: `<div>
      <h1>angular remove element from array</h1>
      <div *ngFor="let value of myArray;">
        {{ value.id }}. {{ value.name }} <button (click)="removeItem(value)">Remove</button>
      </div>
  </div>`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
   
  myArray = [
    { id:1, name:'Hardik'},
    { id:2, name:'Paresh'},
    { id:3, name:'Rakesh'},
    { id:3, name:'Mahesh'},
  ];
  
  removeItem(obj){
     this.myArray = this.myArray.filter(item => item !== obj);
  }
}

Angular Delete Item from Array by Id

import { Component } from '@angular/core';
  
@Component({
  selector: 'my-app',
  template: `<div>
      <h1>angular remove element from array</h1>
      <div *ngFor="let value of myArray;">
        {{ value.id }}. {{ value.name }} <button (click)="removeItem(value.id)">Remove</button>
      </div>
  </div>`,
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
    
  myArray = [
    { id:1, name:'Hardik'},
    { id:2, name:'Paresh'},
    { id:3, name:'Rakesh'},
    { id:4, name:'Mahesh'},
  ];
 
  removeItem(id){
     this.myArray = this.myArray.filter(item => item.id !== id);
  }
}

You can also see bellow layout:

I hope it can help you...