How to reuse Observable with parameter

userfGx21 0
Viewed 80

I want to write more declarative code so I wanted to implement this feature with just Observables without manual subscribe.

// Define the form
this.form = this.formBuilder.group({
  name: [{ value: null, disabled: true }, Validators.required],
  bla: [{ value: null, disabled: true }, Validators.required],
});

//Save the name into reusable observable
const test$ = this.form.get('name')?.valueChanges.pipe(
  switchMap((name: string) =>
    this.myService.getUserByName$(name)
  )
);


// This is not triggering (there is async pipe in the template)
this.data$ = this.form.get('bla')!!.valueChanges.pipe(
      filter((bla) => !!bla),
      switchMap((bla: string) =>
        test$!!.pipe(
          filter((t) => !!t),
          map((services: any) => services.map((service: any) => ({ key: service.id, value: service.name })))
        )
      )
    );

How can I reuse an observable with dynamic parameter?

The upper works if I hardcode the name instead of setting it with switch map

const test$ = this.myService.getUserByName$('John')
angular rxjs
1 Answers

Here is an example of how I did it... let me know if it works for you :)

  user$: Observable<User> = new Observable<User>();

  getUserInfo(): void{
    const id = Number(this.route.snapshot.paramMap.get('id'));
    this.user$ = this.userService.GetUserInfoById(id);
  }
d.cepp0
Related