Rxjs best practices: Perfom a nested subscription with a condition between

I’m working in a feature of an angular project.
We have a /create component that renders a serie of inputs and dropdowns so the user can create a given object.

I want to reutilize that component to create a /edit:id component, so I can (no surprise here) edit that given object. All Inputs and dropdowns should be filled with the data of that object.

I have the following code:

Somewhere over the HTML I have a (click)=onClick(id) and inside the method onClick(id) I do the redirection to the /edit route.

Implement the new route in the app-routing.module. I.E:

{ path: 'edit/:id', component: createComponent }

and inside the OnInit hook of the createComponent

  ngOnInit(): void {
        .subscribe(id => console.log(id)); //this returns the given id edit/:id

So, if I’m in /edit/:id I get the Id, and if i’m in the original /create I got an empty object.

So I want to create the following logic:

    If the object that the observable emits is a blank object, im on /create thus I should do nothing --END
    If the object that the observable emits has a id property, im on a /edit
        I should call a service method that returns a second observable, this method triggers an HTTP GET call to the server to get the data of the object with id
            Subscribe to the result of that service method and set the result object in a property in my component

Rxjs is not my strongest suit, and I can’t decide wich rxjs operator should I use to this given use case. My first implementation to achieve this involves a nested subscription but this doesn’t seems the right approach. Can anyone send some pointers over this?


Source: Angular Questions