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.
HTML
x
17
17
1
2
<html lang="en">3
<head>4
<meta charset="utf-8">5
<title>FlightApp</title>6
<base href="/">7
<meta name="viewport" content="width=device-width, initial-scale=1">8
<link rel="icon" type="image/x-icon" href="favicon.ico">9
<link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">10
<link href="assets/css/small-business.css" rel="stylesheet">11
</head>12
<body>13
<app-root></app-root>14
<script src="assets/vendor/jquery/jquery.min.js"></script>15
<script src="assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>16
</body>17
</html>Here’s the state of our app.component.html at this point. Some rows were removed for brevity.
HTML
xxxxxxxxxx1
42
42
1
<app-nav></app-nav>2
<div class="container" role="main">3
<div class="title">4
<h1>Flight Scheduler</h1>5
</div>6
<div class="table-responsive rounded bg-light p-4 my-4">7
<div class="mb-2">8
<p class="font-weight-bold">Active Flight Schedule</p>9
</div>10
<table class="table table-hover">11
<thead class="table-borderless table-secondary">12
<tr>13
<th scope="col">No.</th>14
<th scope="col">Airline</th>15
<th scope="col">Flight No.</th>16
<th scope="col">Trip Type</th>17
<th scope="col">Departure Airport</th>18
<th scope="col">Arrival Airport</th>19
<th scope="col">Departure Date</th>20
<th scope="col">Return Date</th>21
<th scope="col">Actions</th>22
</tr>23
</thead>24
<tbody>25
<tr>26
<td scope="row">1</td>27
<td>Mark</td>28
<td>Otto</td>29
<td>@mdo</td>30
<td>@mdo</td>31
<td>@mdo</td>32
<td>@mdo</td>33
<td>@mdo</td>34
<td>@mdo</td>35
</tr> 36
</tbody>37
</table>38
</div>39
</div>40
41
<router-outlet></router-outlet>42
<app-footer></app-footer>
