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

Part 1: We’ll clean up the app.component.html template and grab a bootstrap table template and integrated into our Angular app.

Out main index.html file after updated with the Bootstrap template.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>FlightApp</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="assets/css/small-business.css" rel="stylesheet">
</head>
<body>
  <app-root></app-root>
  <script src="assets/vendor/jquery/jquery.min.js"></script>
  <script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Here’s the state of our app.component.html at this point. Some rows were removed for brevity.

<app-nav></app-nav>
<div class="container" role="main">
  <div class="title">
    <h1>Flight Scheduler</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>
          <td scope="row">1</td>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
          <td>@mdo</td>
          <td>@mdo</td>
          <td>@mdo</td>
          <td>@mdo</td>
          <td>@mdo</td>
        </tr>       
      </tbody>
    </table>
  </div>
</div>

<router-outlet></router-outlet>
<app-footer></app-footer>