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

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>