While working on my app, I managed to display individual flights in a horizontal list that users can scroll through. Here's what it looks like:
https://i.sstatic.net/oTwZS.png
Now, the next step for me is to make it so that when users click on a specific flight, its details will pop up on the screen. To achieve this, I need to figure out how to add a click event to each flight iteration, triggering the selectFlight method.
Here's a snippet of my code:
<h3>Flights </h3>
<div>
<ul class= "grid grid-pad">
<a *ngFor="let flight of flights" class="col-1-4">
<li class ="module flight">
<h4>{{flight.number}}</h4>
</li>
</a>
</ul>
</div>
In order to achieve this functionality, I need to implement a click event like this: (click)="selectFlight() on every li element representing an individual flight.
I'm relatively new to Angular development with HTML & CSS, so I would appreciate any guidance or help from the community. Thank you in advance!
Edit: old flight-viewer.html
<!--
<!-- Omitted for brevity -->
-->
Do I need to include something like onFlightSelected ="flightSelected($event)" in my flight-viewer.html file?