Hello Devs,
In this tutorial, we will learn Angular Delete Item from Array Examples
In this section, we will focus on angular remove item from array by value.
Follow this step by step guide below.
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);
}
}May this example help you.