Angular How to Remove Element from Array?

Here, We will show you how to works angular remove elements from an array. We will use angular remove elements from the array by index. This article goes in detail on the angular delete element from the array by value. We will use angular remove items from the array by value.

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

I will give you four examples of how to remove the item from an 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 the item from the 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 array element 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:'India'},
    { id:2, name:'Us'},
    { id:3, name:'London'},
    { id:4, name:'Canada'},
  ];
  
  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:'India'},
    { id:2, name:'Us'},
    { id:3, name:'London'},
    { id:4, name:'Canada'},
  ];
 
  removeItem(id){
     this.myArray = this.myArray.filter(item => item.id !== id);
  }
}

It will helpful to you.