Create A Flight List Table in Angular (Three Part Series)

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"
    }
]