Create A Flight List Table in Angular (Three Part Series)
March 28, 2020
Part 2: We’ll modify the table heading to align them with the fields in the JSON data which we will be adding. Next, we’ll create a property called “flightData” and add it to the root component. We’ll also create a function called deleteFlight(id) which accepts the id of the FlightData. Finally, we’ll clean up the table rows and use a *ngFor and *ngIf directives to iterate through the flightData and build each record dynamically.
The stae of our app.component.ts after part 2.
TypeScript
x
18
18
1
import { Component } from '@angular/core';2
import {FlightData } from './models/FlightData';3
4
@Component({5
selector: 'app-root',6
templateUrl: './app.component.html',7
styleUrls: ['./app.component.css']8
})9
export class AppComponent {10
flightData = FlightData;11
title = 'Flight Scheduler';12
13
deleteFlight(id){14
//to do15
console.log(id);16
}17
}18
The state of our app.component.html after part 2.
HTML
xxxxxxxxxx1
45
45
1
<app-nav></app-nav>2
<div class="container" role="main">3
<div class="title">4
<h1>{{title}}</h1>5
</div>6
<div class="table-responsive rounded bg-light p-4 my-4">7
<div class="mb-2">8
<p class="font-weight-bold">Active Flight Schedule</p>9
</div>10
<table class="table table-hover">11
<thead class="table-borderless table-secondary">12
<tr>13
<th scope="col">No.</th>14
<th scope="col">Airline</th>15
<th scope="col">Flight No.</th>16
<th scope="col">Trip Type</th>17
<th scope="col">Departure Airport</th>18
<th scope="col">Arrival Airport</th>19
<th scope="col">Departure Date</th>20
<th scope="col">Return Date</th>21
<th scope="col">Actions</th>22
</tr>23
</thead>24
<tbody> 25
<tr *ngFor="let flight of flightData">26
<td scope="row">{{flight.id}}</td>27
<td>{{flight.airline}}</td>28
<td>{{flight.flight_no}}</td>29
<td>{{flight.trip_type}}</td>30
<td>{{flight.departure_airport}}</td>31
<td>{{flight.arrival_airport}}</td>32
<td>{{flight.departure_date}}</td>33
<td>{{flight.return_date}}</td>34
<td>35
<a href="/edit/{{flight.id}}" type="button" class="btn btn-success btn-sm text-white mr-2">Edit</a>36
<button (click)="deleteFlight(flight.id)" type="button" class="btn btn-danger btn-sm">Delete</button>37
</td>38
</tr> 39
</tbody>40
</table> 41
</div>42
</div>43
44
<router-outlet></router-outlet>45
<app-footer></app-footer>
