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.
<div class="table-responsive rounded bg-light p-4 my-4">
<div class="mb-2">
<p class="font-weight-bold">Active Flight Schedule</p>
</div>
<table class="table table-hover">
<thead class="table-borderless table-secondary">
<tr>
<th scope="col">No.</th>
<th scope="col">Airline</th>
<th scope="col">Flight No.</th>
<th scope="col">Trip Type</th>
<th scope="col">Departure Airport</th>
<th scope="col">Arrival Airport</th>
<th scope="col">Departure Date</th>
<th scope="col">Return Date</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let flight of flights">
<td scope="row">{{flight.id}}</td>
<td>{{flight.airline}}</td>
<td>{{flight.flight_no}}</td>
<td>{{flight.trip_type}}</td>
<td>{{flight.departure_airport}}</td>
<td>{{flight.arrival_airport}}</td>
<td>{{flight.departure_date}}</td>
<td>{{flight.return_date}}</td>
<td>
<a href="/edit/{{flight.id}}" type="button" class="btn btn-success btn-sm text-white mr-2">Edit</a>
<button (click)="deleteFlight(flight.id)" type="button" class="btn btn-danger btn-sm">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>The source file (flight-list-component.ts)
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-flight-list',
templateUrl: './flight-list.component.html',
styles: []
})
export class FlightListComponent implements OnInit {
@Input() flights = [];
constructor() { }
ngOnInit(): void {
}
deleteFlight(id){
let index = this.flights.findIndex( e => e.id === id);
if(index !== -1){
this.flights.splice(index,1);
}
console.log(id);
}
}
The JSON data
export const FlightData = [
{
"id": 1,
"airline": "United Airlines",
"flight_no": "UA1234",
"trip_type": "Round Trip",
"departure_airport": "ORD",
"arrival_airport": "LAX",
"departure_date": "2019-06-24",
"return_date": "2019-06-25"
},
{
"id": 2,
"airline": "American Airlines",
"flight_no": "AA1952",
"trip_type": "One Way",
"departure_airport": "LAX",
"arrival_airport": "ABQ",
"departure_date": "2019-06-25",
"return_date": "2019-06-26"
},
{
"id": 3,
"airline": "Southwest Airlines",
"flight_no": "WN4307",
"trip_type": "Round Trip",
"departure_airport": "ORD",
"arrival_airport": "DEN",
"departure_date": "2019-06-25",
"return_date": "2019-06-26"
},
{
"id": 4,
"airline": "Alaska Airlines",
"flight_no": "AS1677",
"trip_type": "One Way",
"departure_airport": "BOS",
"arrival_airport": "CLT",
"departure_date": "2019-06-27",
"return_date": "2019-06-28"
},
{
"id": 5,
"airline": "Hawaiian Airlines",
"flight_no": "HA4233",
"trip_type": "Round Trip",
"departure_airport": "HNL",
"arrival_airport": "LAX",
"departure_date": "2019-06-28",
"return_date": "2019-06-29"
},
{
"id": 6,
"airline": "Virgin Atlantic",
"flight_no": "VS1980",
"trip_type": "Round Trip",
"departure_airport": "SEA",
"arrival_airport": "LHR",
"departure_date": "2019-06-29",
"return_date": "2019-07-02"
},
{
"id": 7,
"airline": "Korean Air",
"flight_no": "KE5233",
"trip_type": "One Way",
"departure_airport": "ORD",
"arrival_airport": "ICN",
"departure_date": "2019-06-28",
"return_date": "2019-07-02"
},
{
"id": 8,
"airline": "Delta Air Lines",
"flight_no": "DL1889",
"trip_type": "One Way",
"departure_airport": "MIA",
"arrival_airport": "ORD",
"departure_date": "2019-07-01",
"return_date": "2019-07-02"
},
{
"id": 9,
"airline": "Malasia Airlines",
"flight_no": "MH9880",
"trip_type": "Round Trip",
"departure_airport": "JFK",
"arrival_airport": "KUL",
"departure_date": "2019-06-29",
"return_date": "2019-07-03"
},
{
"id": 10,
"airline": "Air New Zealand",
"flight_no": "NZ8029",
"trip_type": "One Way",
"departure_airport": "DEN",
"arrival_airport": "ALR",
"departure_date": "2019-06-28",
"return_date": "2019-07-02"
}
]
