BehaviorSubject In Angular making schedule (or timer) between data

Question

Iam trying to make a schedule update for my page

like "subscribe" and "unsubscribe" repeatedly with

to make page update after 10 muntes or so and in the same time not makeing a headinc on the DataBase

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { MaintenanceServicesService } from './MaintinanceService/maintenance-services.service';



@Component({
  selector: 'app-maintenance',
  templateUrl: './maintenance.component.html',
  styleUrls: ['./maintenance.component.scss']
})
export class MaintenanceComponent implements OnInit, OnDestroy {

  pageCards: any[] = []
  subscripe?: Subscription


  constructor(private _MaintenanceServicesService: MaintenanceServicesService) {
  }

  ngOnInit(): void {
    this.subscripe = this._MaintenanceServicesService.pageCards.subscribe({
      next: () => {
        this.GetPageCards()
      }
    });
  }

  ngOnDestroy(): void {
    if (this.subscripe) {
      this.subscripe.unsubscribe()
    }
  }

  GetPageCards() {
    this._MaintenanceServicesService.GetServicesPageCards()
    this.pageCards = this._MaintenanceServicesService.pageCards.getValue()
  }

}

score 2 · Accepted Answer · answered Dec 16 '22 at 08:04

The title is misleading. BehaviorSubject will emit values whenever your data appears.

You don't need to subscribe/unsubscribe from data every time interval, that's the whole goal of observables - you react on data whenever it appears.

In the example you can find how there is timer that creates observable, that has some initialDelay (you can set it to 0) and after that delay it uses interval value to define the time between emitted events. So now you have a stream, that emits something every interval value, and here you want to do something - so you're fetching the data from your service and return it.

Another thing - don't need to subscribe/unsubscribe, just assign the result to data$ variable (it's observable) and in the template you can use the | async pipe, so it will handle subscription/unsubscription automatically.

Ok will try to make the same thing in my project thanks for the example — NooP SkuLL, Dec 16 '22 at 08:34
pageCards: any[] = [] subscripe?: Subscription constructor(private _MaintenanceServicesService: MaintenanceServicesService) { } ngOnInit(): void { this.subscripe = timer(0, 5000).subscribe(() => { this._MaintenanceServicesService.pageCards.pipe(take(1)).subscribe({ next: () => { this.GetPageCards() } }); }) } — NooP SkuLL, Dec 16 '22 at 18:03

score 0 · Answer 2 · answered Dec 16 '22 at 18:04

0

pageCards: any[] = []
  subscripe?: Subscription


  constructor(private _MaintenanceServicesService: MaintenanceServicesService) {
  }

  ngOnInit(): void {
    this.subscripe = timer(0, 5000).subscribe(() => {
      this._MaintenanceServicesService.pageCards.pipe(take(1)).subscribe({
          next: () => {
            this.GetPageCards()
          }
        });
    })
  }

this i how i made it thank you @akkonrad

answered Dec 16 '22 at 18:04

NooP SkuLL

23
4

you should avoid subscription inside another subscription [link 1](https://www.thinktecture.com/en/angular/rxjs-antipattern-1-nested-subs/) [link 2](https://brianflove.com/2017-11-01/ngrx-anti-patterns/) [link 3](https://stackoverflow.com/questions/42888604/rxjs-observables-nested-subscriptions) – akkonrad Dec 21 '22 at 12:42

BehaviorSubject In Angular making schedule (or timer) between data

2 Answers2