Update of a (role) component when a HTTP operation is made by an Admin component in Angular

Question

I have 2 roles, Admin and Watcher, the admin has the ability to make changes to a table and upload them to a DB, the watcher can't make changes to that table, it can only visualize the data, the problem is that whenever an admin makes a (PUT, POST, DELETE) change to the table, the watcher only receives it if the page is reloaded, i want the change to be seen in the watcher component without the page being reloaded, immediatly when the admin makes a change to the table.

I've tried making a shared service that notifies the watcher whenever there's a change in the table:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class ActionPlanSharedService {
  
  private tableUpdated = new BehaviorSubject<boolean>(false);

  // Observable para que otros componentes puedan suscribirse a los cambios
  tableUpdated$ = this.tableUpdated.asObservable();

  constructor() {}

  // Método para notificar que los datos han cambiado
  notifyTableUpdate(): void {
    this.tableUpdated.next(true);
  }
  
}

Watcher component:

  private subscription!: Subscription;

  ngOnInit(): void {

    this.getTableData(); // Cargar datos iniciales

    this.subscription = this.actionPlanSharedService.tableUpdated$.subscribe((updated) => {
      if (updated) {
        this.getTableData();
        this.getUpdatedAt();
      }
    });
    
  }

  ngOnDestroy(): void {

    this.subscription.unsubscribe();
    
  }

Admin component:

deleteRow(): void {
    const id = this.id;
    this.actionPlanService.deleteActionPlan(id).subscribe({
      next: () => {
        this.toastr.success('Registro eliminado exitosamente');
        this.getTableData();
        this.actionPlanSharedService.notifyTableUpdate();
      },
      error: (err) => {
        this.toastr.error('Error al eliminar el registro', err.message);
        console.error('Error al eliminar el registro', err);
      },
    });
  }

I think the error here is that the subscription is only make when the component starts, but even if there is a change, this component will not receive it because the subscription is already made and the value is already stablished (false). I was thinking of inserting the subscription in a ngOnChanges and detect if the table have been modified, but i dont know how to do it.

if want the results "live" you'll need to use websockets: rxjs.dev/api/webSocket/webSocket — browsermator
– browsermator, Commented Feb 7 at 18:27

tuhin47 · Accepted Answer · 2025-02-08 04:58:44Z

1

For real-time data from the client, you have several options like (Websocket, Server-Sent events, Long Polling, etc.)

You just want to see updated data from the watcher's perspective like live score. In that case, you don't need two-way data communication like a web socket. You can simply use SSE or Long Polling.

answered Feb 8 at 4:58

tuhin47

6,2735 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Damian · Accepted Answer · 2025-02-07 19:21:12Z

0

As @browsermator said in the comments, you'll have to use websockets since no matter what change you make in your service, the Watcher's view won't be updated as the code runs in a different environment than the Admin.

answered Feb 7 at 19:21

Damian

3041 silver badge10 bronze badges

Collectives™ on Stack Overflow

Update of a (role) component when a HTTP operation is made by an Admin component in Angular

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related