Create A Flight List Table in Angular (Three Part Series)
March 28, 2020
Part 3: We’ll add the JSON data to a property called FlightData and import it to our root App component. Then we’ll pass this property to the template where it will be parsed and displayed to the Flight List table. Finally, we’ll make sure that the Edit and Delete buttons for each record are assigned the property id’s for editing and deleting to be performed.
The final state of our app.component.ts
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';
}
The final state of our app.component.html.
<app-nav></app-nav>
<div class="container" role="main">
<div class="title">
<h1>{{title}}</h1>
</div>
<app-flight-list [flights]="flightData" ></app-flight-list>
</div>
<router-outlet></router-outlet>
<app-footer></app-footer>The final state of flight-list-component.ts
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'app-flight-list',
templateUrl: './flight-list.component.html',
styles: []
})
export class FlightListComponent implements OnInit {
@Input() flights = [];
constructor() { }
ngOnInit(): void {
}
deleteFlight(id){
//to do
console.log(id);
}
}
The final state of flight-list-component.html
<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 flights">
<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>
