Create A Flight List Table in Angular (Three Part Series)
March 28, 2020
In this three-part video series, we’re going to build the table for our Flight App in Angular. We’ll be using a bootstrap table to make our table responsive and modern. Below is the table that we’ll be building.
Here is our starter file: app.component.ts
TypeScript
x
11
11
1
import { Component } from '@angular/core';2
3
@Component({4
selector: 'app-root',5
templateUrl: './app.component.html',6
styleUrls: ['./app.component.css']7
})8
export class AppComponent {9
title = 'flight-app';10
}11
Start file for app.component.html. Most of the internal content were removed for brevity. We’re going to replace them with the bootstrap table.
HTML
xxxxxxxxxx1
12
12
1
<app-nav></app-nav>2
<div class="content" role="main">3
4
<!-- Highlight Card -->5
<div class="card highlight-card card-small">6
<!-- content removed -->7
</div>8
9
</div>10
11
<router-outlet></router-outlet>12
<app-footer></app-footer>Here is our 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
]
