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
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'flight-app';
}
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.
<app-nav></app-nav>
<div class="content" role="main">
<!-- Highlight Card -->
<div class="card highlight-card card-small">
<!-- content removed -->
</div>
</div>
<router-outlet></router-outlet>
<app-footer></app-footer>Here is our 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"
}
]
