Asynchronous Access to Optimizely Experiment States During Component Initialization

Question

I am using optimizely tool to set up some experiments with metrics.

In my angular web application I check whether it is variant a or variant b when the component is initialized to do some custom logic.

optimizelyVarriationId = "";

ngOninit() {
 const experimentStates = window.optimizely?.get("state").getExperimentStates({isActive: true});
 console.log("experimentStates: ", experimentStates)

 if(experimentStates) {
  Object.keys(experimentStates).forEach((experimentId) => {
   const experiment = experimentStates[experimentId];
   this.optimizelyVarriationId = experiment.variation.id;
   });
 }

 const myVarriationId = "323232323323";

 if (myVarriationId ===  this.optimizelyVarriationId) {
  // do some logic
 }
}

The issue with 3rd party applications is that sometimes on ngOninit lifecyle, optimizely state is not initialized. So I end up getting in the console.log:

experimentStates: {}

which is wrong and it messes completely my logic.

if I do the same thing on a lifecycle that is triggered many times like ngDoCheck this is going to work. (but obviously I do not want this.)

Another solution is to use timeout given the fact that my component console logs optimizely state for example at:

18:15:30.230

and optimizely tool intilized console logs at:

18:15:30.686

but again it is something I do not want, as I will add delay to my web app and seems like a bad approach.

Lastly tried ngAfterViewInit but still, sometimes I get the state, sometimes I do not because of the async logic.

I am looking for a robust solution, to always have the latest data of optimizely state.