Create A Flight List Table in Angular (Three Part Series)
March 28, 2020
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>
