How do I prevent multiple subscription calls in Angular?

Question

I have a message service, to interact between various components. I just want to trigger a message, when I click on the Mine button. This works so far. But when I click on the < and >button, it triggers getMessage(), so that it adds up values. But I just want to send one value, when I click on Mine. The last value only. How do I prevent to trigger getMessage(), when clicking on <and >?

When I click on <and >it switches between the cards from 1 to 10. When I click on Mine it should only take the card which I'm on and send the information from that block to another component. But instead, when I click <or >, getMessage()is getting called and it adds up all cards until I click Mine. How do I prevent that?

Following some code. I tried to keep it compact:

Message-service.ts:

@Injectable({ providedIn: 'root' })
export class MessageService {
  private subject = new Subject<any>();

  sendMessage(message: string) {
    this.subject.next({ text: message });
  }

  getMessage(): Observable<any> {
    console.log('Get Message Message Service');
    return this.subject.asObservable();
  }

Miner-card.component:

  message: any;
  subscription: Subscription;

  constructor(private ref: ChangeDetectorRef, private emitTransactionService: EmitTransactionService,
              private messageService: MessageService) {
    this.subscription = this.messageService.getMessage().subscribe(message => {
      console.log('Constructor miner-card'); // gets called multiple times, depending on how often I click < and >. When I click 10 times on < or > it will call this subscription 10 times.
    });
  }

When I click on <and >, these functions are getting called: Depending on the value of minerCounter, card 1-10 are getting displayed.

  precedingBlock() {
    this.minerCounter--;

    if (this.minerCounter < 1) {
      this.minerCounter = 10;
    }
  }

  nextBlock() {
    this.minerCounter++;

    if (this.minerCounter > 10) {
      this.minerCounter = 1;
    }
  }

How the card looks like with the <and >buttons:

The Mine button:

take(1) operator will solve your problem use that in subscribe — TheParam, Feb 25 '19 at 09:58
can you also add what function you are calling when the `<` or `>` are clicked? — Pushkar Adhikari, Feb 25 '19 at 10:03

Nithya Rajan · Accepted Answer · 2019-02-25T10:54:00.360

4

You should always unsubscribe the subscription in ngOnDestroy.

  message: any;
  subscription: Subscription;

  constructor(private ref: ChangeDetectorRef, private emitTransactionService: EmitTransactionService,
              private messageService: MessageService) {
    this.subscription = this.messageService.getMessage().subscribe(message => {
      console.log('Constructor miner-card'); // gets called multiple times, depending on how often I click < and >. When I click 10 times on < or > it will call this subscription 10 times.
    });
  }

ngOnDestroy() {
  this.subscription.unsubscribe();
}

edited Feb 25 '19 at 10:54

answered Feb 25 '19 at 10:06

Nithya Rajan

4,722
19
30

I used that too already. If I click 5 times on < or >, it still gets called 5 times when I click on 'Mine' – Michael Feb 25 '19 at 10:09
have you tried to unsubscribe the subscription on ngOnDestroy – Nithya Rajan Feb 25 '19 at 10:26
Yes thanks. Write that in your answer and I will give u the green tick :) – Michael Feb 25 '19 at 10:49

score 1 · Answer 2 · answered Feb 25 '19 at 10:00

check if your subscription is undefined or not. If undefined, only then subscribe.

constructor(
private ref: ChangeDetectorRef,
private emitTransactionService: EmitTransactionService,
private messageService: MessageService
) {
if (!this.subscription) {
    this.subscription = this.messageService.getMessage().subscribe(message => {
      console.log('Constructor miner-card'); // gets called multiple times, depending on how often I click < and >. When I click 10 times on < or > it will call this subscription 10 times.
    });
  }
}

Buddy, you should probably consider creating a StackBlitz. It will help us resolve your issue sooner. — Pushkar Adhikari, Feb 25 '19 at 10:16

TheParam · Answer 3 · 2019-02-25T10:08:42.047

1

In your miner-card.component.ts file use take(1). this will get only single data from the subscribe.

  message: any;
  subscription: Subscription;

  constructor(private ref: ChangeDetectorRef, private emitTransactionService: EmitTransactionService,
              private messageService: MessageService) {
    this.subscription = this.messageService.getMessage().pipe(take(1)).subscribe(message => {
      console.log('Constructor miner-card'); // gets called multiple times, depending on how often I click < and >. When I click 10 times on < or > it will call this subscription 10 times.
    });
  }

Hope this will help!

edited Feb 25 '19 at 10:08

answered Feb 25 '19 at 10:02

TheParam

10,113
4
40
51

I imported import { take } from 'rxjs/operators'; and have the same code as you at the moment. But it say unresolved function take(1). – Michael Feb 25 '19 at 10:04
if you are using rxjs latest version then you need to use pipe. check updated answer – TheParam Feb 25 '19 at 10:09

How do I prevent multiple subscription calls in Angular?

3 Answers3