Access Real-time Data from an API (accessing Dynamo DB data) without refreshing the page (asynchronously) in Angular 6

Question

I'm trying to GET data from an API using HttpClientModule in Angular 6. I'm using the subscribe method for subscribing to its data.

Calling the service in component.ts

WidServeService.ts API call

Trying to display the data,

{{widgetarr}}  //In the component's HTML

I'm using dynamo-db to store the data, and i'm trying to access it using above method, I'm able to get the data, but, if I update the DB with new data, I'm not able to see the changes updating in angular dynamically. The page needs to be refreshed always in order to access the latest data. I want real-time data from the API to be displayed asynchronously without refreshing the page, kind of like Ajax, but ajax doesn't work the way I need it to in Angular.

Also, I've referred the Angular.io docs as well, I've tried the async pipe method as well, it doesn't work.

Answer 1

you can use EventEmitter.

Event Emitter in Angular

Create a Event Emitter as Service:

import { EventEmitter, Injectable } from '@angular/core';
@Injectable()
export class EventEmitterService {
  raiseEvent = new EventEmitter();
  constructor() { }
  onSaveAfter() {
    this.raiseEvent.emit();
  }
}

List Component:

import { EventEmitterService } from "../../event-emitter/event-emitter.service";
@Component({
  selector: 'app-list',
  templateUrl: './list.component.html',
  styleUrls: ['./list.component.css'],
})
export class ListComponent implements OnInit, AfterViewInit, OnDestroy {
  constructor(private eventEmitter: EventEmitterService) {
    this.onSave();
  }
  onSave() {
    this.subscribeEvent = this.eventEmitter.raiseEvent.subscribe(data => {
      //your data fetching function to get data.
      this.fillGrid();
    });
  }
  }

Add Edit Component:

import { EventEmitterService } from "../../event-emitter/event-emitter.service";
@Component({
  selector: 'app-add-edit',
  templateUrl: './add-edit.component.html',
  styleUrls: ['./add-edit.component.css'],
})
export class AddEditComponent implements OnInit, AfterViewInit, OnDestroy {
  constructor(private eventEmitter: EventEmitterService) {
  }
    //call this function after you updated data to refresh list.
    refreshList(){
        this.eventEmitter.onSaveAfter(); 
     }

  }