Im trying to make an admin panel where the user can see the bookings for his restaurant in real time. The idea is for new bookings to automatically show in the bookings component, without needing to refresh the page. Im using the async pipe, and it shows all the bookings on the db, but wont automatically refresh.
THIS IS THE BOOKING SERVICE
@Injectable()
export class BookingService{
public url:string;
public booking:Booking;
constructor(
private _http: HttpClient
){
this.url= global.url;
}
makeBooking(booking){
let headers= new HttpHeaders().set('Content-type','application/x-www-form-urlencoded');
let json= JSON.stringify(booking);
let params='json='+json;
return this._http.post(this.url+ 'booking',params, {headers:headers});
}
getBookings():Observable<any>{
let headers= new HttpHeaders().set('Content-type','application/x-www-form-urlencoded');
return this._http.get(this.url+ 'booking/0',{headers:headers});
}
And now the component
@Component({
selector: 'app-turnos',
templateUrl: './bookings.component.html',
styleUrls: ['./bookings.component.css'],
providers:[BookingService]
})
export class BookingsComponent implements OnInit {
public bookings;
public status;
public bookings$: Observable<any>;
constructor(
private _bookingService: BookingService
) {}
ngOnInit(): void {
this.bookings$=this._bookingService.getBookings().pipe(map(res=>this.bookings=res.bookings));
}
}
Finally, on the template im using
<tr *ngFor="let booking of (bookings$ | async) ">
<th scope="row">{{booking.id}}</th>
<td>{{booking.user_name}}</td>
etc
etc
</tr>