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.
import { Component } from '@angular/core';
import {FlightData } from './models/FlightData';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
flightData = FlightData;
title = 'Flight Scheduler';
deleteFlight(id){
//to do
console.log(id);
}
}
The state of our app.component.html after part 2.
<app-nav></app-nav>
<div class="container" role="main">
<div class="title">
<h1>{{title}}</h1>
</div>
<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 flightData">
<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>
</div>
<router-outlet></router-outlet>
<app-footer></app-footer>
