DELETE One Item From a List in Angular
March 28, 2020
In this video, we’re going to implement a deleteFlight(id) function to remove a record from a list of flight data. For this exercise, we’re going to remove data from RAM only and not from a permanent data store. The best option for this operation is to use the two JavaScript built-in functions: findIndex() and splice(). First, we will use the findIndex() function to return the index position of a matching id field, then use the splice() function remove the element from the list.
The source files are available below.
Template file.
HTML
x
36
36
1
<div class="table-responsive rounded bg-light p-4 my-4">2
<div class="mb-2">3
<p class="font-weight-bold">Active Flight Schedule</p>4
</div>5
<table class="table table-hover">6
<thead class="table-borderless table-secondary">7
<tr>8
<th scope="col">No.</th>9
<th scope="col">Airline</th>10
<th scope="col">Flight No.</th>11
<th scope="col">Trip Type</th>12
<th scope="col">Departure Airport</th>13
<th scope="col">Arrival Airport</th>14
<th scope="col">Departure Date</th>15
<th scope="col">Return Date</th>16
<th scope="col">Actions</th>17
</tr>18
</thead>19
<tbody> 20
<tr *ngFor="let flight of flights">21
<td scope="row">{{flight.id}}</td>22
<td>{{flight.airline}}</td>23
<td>{{flight.flight_no}}</td>24
<td>{{flight.trip_type}}</td>25
<td>{{flight.departure_airport}}</td>26
<td>{{flight.arrival_airport}}</td>27
<td>{{flight.departure_date}}</td>28
<td>{{flight.return_date}}</td>29
<td>30
<a href="/edit/{{flight.id}}" type="button" class="btn btn-success btn-sm text-white mr-2">Edit</a>31
<button (click)="deleteFlight(flight.id)" type="button" class="btn btn-danger btn-sm">Delete</button>32
</td>33
</tr> 34
</tbody>35
</table> 36
</div>The source file (flight-list-component.ts)
JavaScript
xxxxxxxxxx1
25
25
1
import { Component, OnInit, Input } from '@angular/core';2
3
@Component({4
selector: 'app-flight-list',5
templateUrl: './flight-list.component.html',6
styles: []7
})8
export class FlightListComponent implements OnInit {9
10
@Input() flights = [];11
12
constructor() { }13
14
ngOnInit(): void {15
}16
17
deleteFlight(id){18
let index = this.flights.findIndex( e => e.id === id);19
if(index !== -1){20
this.flights.splice(index,1);21
}22
console.log(id);23
}24
}25
The JSON data
JSON
xxxxxxxxxx1
102
102
1
export const FlightData = [2
{3
"id": 1,4
"airline": "United Airlines",5
"flight_no": "UA1234",6
"trip_type": "Round Trip",7
"departure_airport": "ORD",8
"arrival_airport": "LAX",9
"departure_date": "2019-06-24",10
"return_date": "2019-06-25"11
},12
{13
"id": 2,14
"airline": "American Airlines",15
"flight_no": "AA1952",16
"trip_type": "One Way",17
"departure_airport": "LAX",18
"arrival_airport": "ABQ",19
"departure_date": "2019-06-25",20
"return_date": "2019-06-26"21
},22
{23
"id": 3,24
"airline": "Southwest Airlines",25
"flight_no": "WN4307",26
"trip_type": "Round Trip",27
"departure_airport": "ORD",28
"arrival_airport": "DEN",29
"departure_date": "2019-06-25",30
"return_date": "2019-06-26"31
},32
{33
"id": 4,34
"airline": "Alaska Airlines",35
"flight_no": "AS1677",36
"trip_type": "One Way",37
"departure_airport": "BOS",38
"arrival_airport": "CLT",39
"departure_date": "2019-06-27",40
"return_date": "2019-06-28"41
},42
{43
"id": 5,44
"airline": "Hawaiian Airlines",45
"flight_no": "HA4233",46
"trip_type": "Round Trip",47
"departure_airport": "HNL",48
"arrival_airport": "LAX",49
"departure_date": "2019-06-28",50
"return_date": "2019-06-29"51
},52
{53
"id": 6,54
"airline": "Virgin Atlantic",55
"flight_no": "VS1980",56
"trip_type": "Round Trip",57
"departure_airport": "SEA",58
"arrival_airport": "LHR",59
"departure_date": "2019-06-29",60
"return_date": "2019-07-02"61
},62
{63
"id": 7,64
"airline": "Korean Air",65
"flight_no": "KE5233",66
"trip_type": "One Way",67
"departure_airport": "ORD",68
"arrival_airport": "ICN",69
"departure_date": "2019-06-28",70
"return_date": "2019-07-02"71
},72
{73
"id": 8,74
"airline": "Delta Air Lines",75
"flight_no": "DL1889",76
"trip_type": "One Way",77
"departure_airport": "MIA",78
"arrival_airport": "ORD",79
"departure_date": "2019-07-01",80
"return_date": "2019-07-02"81
},82
{83
"id": 9,84
"airline": "Malasia Airlines",85
"flight_no": "MH9880",86
"trip_type": "Round Trip",87
"departure_airport": "JFK",88
"arrival_airport": "KUL",89
"departure_date": "2019-06-29",90
"return_date": "2019-07-03"91
},92
{93
"id": 10,94
"airline": "Air New Zealand",95
"flight_no": "NZ8029",96
"trip_type": "One Way",97
"departure_airport": "DEN",98
"arrival_airport": "ALR",99
"departure_date": "2019-06-28",100
"return_date": "2019-07-02"101
}102
]
