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';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  flightData = FlightData;
  title = 'Flight Scheduler';

    //to do

The state of our app.component.html after part 2.

<div class="container" role="main">
  <div class="title">
  <div class="table-responsive rounded bg-light p-4 my-4">
    <div class="mb-2">
      <p class="font-weight-bold">Active Flight Schedule</p>
    <table class="table table-hover">
      <thead class="table-borderless table-secondary">
          <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 *ngFor="let flight of flightData">
          <td scope="row">{{}}</td>
            <a href="/edit/{{}}" type="button" class="btn btn-success btn-sm text-white mr-2">Edit</a>
            <button (click)="deleteFlight(" type="button" class="btn btn-danger btn-sm">Delete</button>