I'm currently working on a project using Angular, with my database in MongoDB and backend in Flask. I have a collection where the data is constantly changing every 10 seconds. I am developing REST APIs to facilitate sharing data between Angular and MongoDB. How can I ensure that I always have the most up-to-date information from my database without having to refresh the page each time?
The values for heart rate, blood pressure (BP), oxygen levels (O2), and pulse rate (PR) are all updated every 10 seconds in this section.
<ng-template #not_distressed>
<div class="card-header" style="color: rgb(0, 0, 0); ">
<b>Ward No : {{patient.ward_no}}</b>
</div>
<div class="card-body" style="color: rgb(0, 0, 0); ">
<div style="text-align: left;"></div>
<div style="text-align: right;"></div>
<h5 class="card-title"><b>Name : </b>{{patient.patient_name}}</h5>
<p class="card-text">
<b>Heart beat : </b>{{patient.heart_rate}}<br>
<b>B.P. : </b>{{patient.BP}}<br>
<b>O2 : </b>{{patient.O2}}<br>
<b>P.R. : </b>{{patient.RR}}
</p>
</div>
</ng-template>
TypeScript file
import { Component, OnInit } from '@angular/core';
import { PatientVitalsService } from '../services/patient-vitals.service';
@Component({
selector: 'app-patient-vitals',
templateUrl: './patient-vitals.component.html',
styleUrls: ['./patient-vitals.component.css']
})
export class PatientVitalsComponent implements OnInit {
public patientVital={};
constructor(private _patientListService: PatientVitalsService) { }
ngOnInit() {
this.dataService.getdetails().subscribe((data: any)=>{
console.log("In service",data);
this.repos = data;
this.patientVital = this.repos['result']
})
}
}
Service.ts file
import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Observable, Subject, throwError, BehaviorSubject } from 'rxjs';
import { catchError } from 'rxjs/operators';
import { ajax } from 'rxjs/ajax';
@Injectable({
providedIn: 'root'
})
export class DataService {
get_symptoms = "http://127.0.0.1:5000/api/getdetails"
getdetails(): Observable<any> {
return this.httpClient.get(this.get_details)
}
}