It's been several times where I have coded solutions followed by 1000 fixes when in an Angular project I find myself having to listen to several events spread over time due to Angular life cycles, time to execute of some functions, and all that in order to execute a single action.

I don't know if it is possible using the APIs provided by Angular and even RxJs to achieve my goals.

My question:

How should it go about waiting for a page's QueryParams response, while waiting for some @inputs provided by that page and waiting for a subscription's response.

Is it a design error? Is there an easier solution than testing all possible cases?

The goal is to perform an action only when I have the value of the 2 inputs and the two subscriptions.

Knowing that I would never have them at the same time and that the value of the service is independent of the Angular lifecycle

export class aComponent implements OnChanges{


@Input() anInput!: string;
@Input() anotherInput!: string;


private theInputValue : string;
private theAnotherInputValue: string;
private theServiceValue: string;
private theActivatedRouteQueryParamsValue: string;


constructor(private aService: ServiceType, private activatedRoute: ActivatedRoute){
    
    // This will only be emitted when a user click on something on the user interface
    this.aService.something.subscribe((value) => {
        this.theServiceValue = value;
    })


    this.activatedRoute.queryParams.subscribe((queryParams) => {
        this.theActivatedRouteQueryParamsValue = queryParams;
    })

    // And now, when to call executeThisFunctionWhenAllClassPropertiesAreSetted() ?
}

// When all values are there, do an action, (Here is my question). How to know it without using a setInterval() function ?
private executeThisFunctionWhenAllClassPropertiesAreSetted(): void{
    // God, i learned something, thank you <3
}

}

I would appreciate your answers, Regards