Booking service
// booking.service.ts
import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { Observable } from 'rxjs';
@Injectable({ providedIn: 'root' }) export class BookingService { private apiUrl = 'http://localhost:8080'; // Update with actual backend URL
constructor(private http: HttpClient) {}
createBooking(booking: any): Observable<any> { return this.http.post(${this.apiUrl}/bookings, booking); }
getAllBookings(): Observable<any> { return this.http.get(${this.apiUrl}/bookings); }
getBookingById(id: string): Observable<any> { return this.http.get({id}); }
getBookingsByUserId(userId: string): Observable<any> { return this.http.get({userId}); }
updateBookingStatus(id: string, status: string): Observable<any> { return this.http.put({id}/status?status=${status}, {}); }
deleteBooking(id: string): Observable<any> { return this.http.delete({id}); } }
// booking.component.ts import { Component, OnInit } from '@angular/core'; import { BookingService } from '../services/booking.service';
@Component({ selector: 'app-booking', templateUrl: './booking.component.html', styleUrls: ['./booking.component.css'] }) export class BookingComponent implements OnInit { bookings: any[] = [];
constructor(private bookingService: BookingService) {}
ngOnInit() { this.loadBookings(); }
loadBookings() { this.bookingService.getAllBookings().subscribe( (data) => (this.bookings = data), (error) => console.error('Error fetching bookings', error) ); } }
// booking.component.html
<div> <h2>Bookings</h2> <ul> <li *ngFor="let booking of bookings">{{ booking.id }} - {{ booking.status }}</li> </ul> </div>// app.routes.ts import { Routes } from '@angular/router'; import { BookingComponent } from './booking/booking.component';export const routes: Routes = [ { path: 'bookings', component: BookingComponent }, { path: '', redirectTo: '/bookings', pathMatch: 'full' } ];