1

I am working on angular 4 project.

I have filter object globalFilter and method filterByClient

filterByClient(obj) {
    this.globalFilter['client__uuid'] = obj.uuid;
    this.serviceCall(this.globalFilter); // Http service call 
}

When I click on a button filterByClient(obj) is invoked and http service is called. This is working solution.

Now I want the more robust solution. When I change anything on this.globalFilter automatically Http service will be called.

I am sure we can solve it by Observer pattern. But I am here to get community hands.

2
  • What's the type of this.globalFilter?
    – user2030471
    Dec 14, 2017 at 7:36
  • @NishantShreshth that will be a mutable object. May have nested object but for now depth 2. Dec 14, 2017 at 7:39

2 Answers 2

2

You can wrap your object in a Subject:

globalFilterSource = new Subject<any>();
globalFilter$ = globalFilterSource.asObservable();

// handle filter update
globalFilter$.subscribe(
  newGlobalFilter => {
    // filter updated
  }
)

// notify filter update from elsewhere
globalFilterSource.next(newGlobalFilter);
0

Use rxjs is the best way to reactive this behaviour. I suggest the solution bellow:

  1. First set a globalFilter behaviour object.

    globalFilter: BehaviourObject = new BehaviourObject( new Client() );

  2. Subscribe to the object to call automatically the http call when client data change:

    globalFilter.subscribe(client => this.serviceCall(client); );

  3. Emet an event when client data change:

    Client.uuid = object.uuid

    globalFilter.next(client);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.