Overview
FlightsApiService is a core Angular service that handles all HTTP communication with the Air Tracker backend API. It provides methods to fetch live flight data and aircraft photos using Angular’s HttpClient.
This service is provided at the root level and automatically injected into other services like FlightsStoreService.
Location
src/app/features/flights/services/flights-api.service.ts
Methods
getLiveFlights()
Fetches current live flight data from the backend API.
Returns
Observable<FlightResponseDto>
Returns an Observable that emits flight data including:
time: Unix timestamp of the responseflights: Array of flight objects with position, velocity, and metadatacacheAgeMs: Age of cached data in millisecondspollingIntervalMs: Recommended polling intervalnextUpdateInMs: Time until next data update
Unix timestamp of the response
Array of flight objects containing position, velocity, and aircraft metadata
Age of the cached data in milliseconds
Recommended polling interval in milliseconds
Time until next data update in milliseconds
GET /flights/live
Usage Example:
import { inject, Injectable } from '@angular/core';
import { FlightsApiService } from './flights-api.service';
import { catchError, of } from 'rxjs';
@Injectable()
export class MyService {
private readonly api = inject(FlightsApiService);
loadFlights(): void {
this.api.getLiveFlights()
.pipe(
catchError((err) => {
console.error('Failed to fetch flights:', err);
return of(null);
})
)
.subscribe(response => {
if (response) {
console.log(`Received ${response.flights.length} flights`);
console.log(`Cache age: ${response.cacheAgeMs}ms`);
}
});
}
}
getPhotosByIcao24()
Fetches aircraft photos for a specific aircraft identified by its ICAO 24-bit address.
The ICAO 24-bit address (unique aircraft identifier) to fetch photos for
Returns
Observable<AircraftPhotoDto>
Returns an Observable that emits aircraft photo data including:
thumbnailUrl: URL to thumbnail imagelargeUrl: URL to full-size imagelink: Link to photo source pagephotographer: Name of the photographerattribution: Attribution text
URL to the thumbnail image
URL to the full-size image
Link to the photo source page
Attribution text for the photo
GET /aircraft-photos/{icao24}
Usage Example:
import { inject, Injectable } from '@angular/core';
import { FlightsApiService } from './flights-api.service';
import { take, catchError, of } from 'rxjs';
@Injectable()
export class FlightDetailService {
private readonly api = inject(FlightsApiService);
loadAircraftPhoto(icao24: string): void {
this.api.getPhotosByIcao24(icao24)
.pipe(
take(1),
catchError(() => of(null))
)
.subscribe(photoDto => {
if (photoDto) {
console.log('Photo URL:', photoDto.largeUrl);
console.log('Photographer:', photoDto.photographer);
} else {
console.log('No photo available for this aircraft');
}
});
}
}
Real-World Usage
From flights-shell.component.ts:109-131, here’s how the service is used in production:
import { Component, inject, OnInit } from '@angular/core';
import { FlightsApiService } from '../services/flights-api.service';
import { FlightsStoreService } from '../services/flights-store.service';
import { catchError, of, take } from 'rxjs';
@Component({
selector: 'app-flights-shell',
// ...
})
export class FlightsShellComponent implements OnInit {
private readonly api = inject(FlightsApiService);
protected readonly store = inject(FlightsStoreService);
ngOnInit(): void {
// Start polling for live flight data
this.store.startSmartPolling();
}
private openFlightDetailUI(icao24: string): void {
// Fetch aircraft photo when user selects a flight
this.api
.getPhotosByIcao24(icao24)
.pipe(
take(1),
catchError(() => of(null))
)
.subscribe(photoDto => {
let photo: AircraftPhoto | null = null;
if (photoDto) {
try {
photo = fromAircraftPhotoDto(photoDto);
} catch (e) {
console.warn('Invalid photo:', e);
}
}
// Display photo in UI...
});
}
}
Dependencies
The service automatically injects:
HttpClient - For making HTTP requestsApiConfigService - For retrieving the base API URL
See Also
