Create A Flight List Table in Angular (Three Part Series)
March 28, 2020
Part 3: We’ll add the JSON data to a property called FlightData and import it to our root App component. Then we’ll pass this property to the template where it will be parsed and displayed to the Flight List table. Finally, we’ll make sure that the Edit and Delete buttons for each record are assigned the property id’s for editing and deleting to be performed.
The final state of our app.component.ts
JavaScript
x
14
14
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
}14
The final state of our app.component.html.
HTML
xxxxxxxxxx1
9
1
<app-nav></app-nav>2
<div class="container" role="main">3
<div class="title">4
<h1>{{title}}</h1>5
</div>6
<app-flight-list [flights]="flightData" ></app-flight-list>7
</div>8
<router-outlet></router-outlet>9
<app-footer></app-footer>The final state of flight-list-component.ts
JavaScript
xxxxxxxxxx1
22
22
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
//to do19
console.log(id);20
}21
}22
The final state of flight-list-component.html
HTML
xxxxxxxxxx1
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>
