I try to adjust a working example from ngx-chips to my needs. This is how the onRemoving method example looks like:

public onRemoving(tag: TagModel): Observable<TagModel> {
        const confirm = window.confirm('Do you really want to remove this tag?');
        return Observable
            .of(tag)
            .filter(() => confirm);
    }

Now instead of windows.confirm I want to use a custom ponent that has a AskQuestion method with the following signatur:

AskQuestion(question: string, yesCallback: () => void, noCallback?: () => void): void {

So now I have multiple callbacks but the ngx-chips ponents expect that I return an observable. I tried to convert the callback to an observable using the bindCallback method:

 public onRemoving(tag: TagModel): Observable<TagModel> {

    const choiceCallback = (choice: boolean): TagModel=> {
      if (choice)
        return tag;
    };

    this.questionService.AskQuestion("Remove item?", () => choiceCallback(true), () => choiceCallback(false))

    return Observable.bindCallback(choiceCallback);
  }

But it looks like I am doing it wrong. Any ideas?

I try to adjust a working example from ngx-chips to my needs. This is how the onRemoving method example looks like:

public onRemoving(tag: TagModel): Observable<TagModel> {
        const confirm = window.confirm('Do you really want to remove this tag?');
        return Observable
            .of(tag)
            .filter(() => confirm);
    }

Now instead of windows.confirm I want to use a custom ponent that has a AskQuestion method with the following signatur:

AskQuestion(question: string, yesCallback: () => void, noCallback?: () => void): void {

So now I have multiple callbacks but the ngx-chips ponents expect that I return an observable. I tried to convert the callback to an observable using the bindCallback method:

 public onRemoving(tag: TagModel): Observable<TagModel> {

    const choiceCallback = (choice: boolean): TagModel=> {
      if (choice)
        return tag;
    };

    this.questionService.AskQuestion("Remove item?", () => choiceCallback(true), () => choiceCallback(false))

    return Observable.bindCallback(choiceCallback);
  }

But it looks like I am doing it wrong. Any ideas?

• javascript
• angular
• typescript
• rxjs

2 Answers 2

The definition of bindCallback() reads:

Give it a function f of type f(x, callback) and it will return a function g that when called as g(x) will output an Observable.

And your usage does not fit this description. choiceCallback() does not return a function that returns an observable.

Use an Observable constructor instead:

public onRemoving(tag: TagModel): Observable <TagModel> {

  return Observable.create(observer => {
    const choiceCallback = (choice: boolean) => {
      if (choice) {
        observer.next(tag);
      }
      observer.plete();
    };

    this.questionService.AskQuestion("Remove item?", () => choiceCallback(true), () => choiceCallback(false));
  });
}

I'm not 100% familiar with this stack, but as far as I could see, looks like bindCallback returns a function which returns an Observable (docs).

So maybe you need to call it to get an observable and use it on your return statement?
Since in your function signature says it would return an Observable type.

You could try to replace the return statement by:
return Observable.bindCallback(choiceCallback)()