CODEWITHSUNDEEP
angularrxjsbehaviorsubjectmethod-signature
Yogi Bear
Yogi Bear

Reputation: 963

Error: Cannot invoke an expression whose type lacks a call signature. (BehaviorSubject)

I can supply a dummy application that demonstrates this, but it boils down to the following: Service file: dialog.service.ts

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

@Injectable()
export class DialogService  {
  public TriggerDlgAction: BehaviorSubject<boolean>;

  constructor() {
    this.TriggerDlgAction = new BehaviorSubject<boolean>(false); // initialize
  }
}

app.component.ts

import { Component, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { DialogService } from './dialog.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit { 
  triggerValue: boolean = false;

  constructor(private dlgSvc: DialogService ) {

  }
  ngOnInit() {
    this.dlgSvc.TriggerDlgAction.subscribe(
      (doTrigger) => {
        this.triggerValue = doTrigger;
        console.log(this.triggerValue);
      }
    )
  } 
}

And the client.component.ts (whose module is imported into app.module.ts.

import { Component } from '@angular/core';
import { DialogService } from '../dialog.service';

@Component({
  selector: 'app-client',
  templateUrl: './client.component.html',
  styleUrls: ['./client.component.css']
})
export class ClientComponent {

  constructor(protected dlgSvc: DialogService) { }

  RequestAppFunction() {
    this.dlgSvc.TriggerDlgAction<boolean>(true);
  }
}

And the error I don't understand: enter image description here

Thanks in advance, :-)

Upvotes: 1

Views: 55

Answers (1)

dev-dan
dev-dan

Reputation: 6283

I think the issue is coming from you trying to call with just true, as the behaviour subject would not expect to be called like this.

Behaviour Subjects are required to be called with next() and the value passed in here, in order to get them to emit to their subscribers.

Try amending the following code.

import { Component } from '@angular/core';
import { DialogService } from '../dialog.service';

@Component({
  selector: 'app-client',
  templateUrl: './client.component.html',
  styleUrls: ['./client.component.css']
})
export class ClientComponent {

  constructor(protected dlgSvc: DialogService) { }

  RequestAppFunction() {
    this.dlgSvc.TriggerDlgAction.next(true);
                               ^^^^^^^^^
  }
}

Upvotes: 2

Related Questions