wait a function to finish

The general use case for waiting for a function to finish is to use async-await and Promise. But somehow I can't get it to work.

I have a directive and in this directive I have a public function like this:

getCellValue(
rowField: string,
rowValue: any,
columnField: string,
gridData?: any[]
): any {
setTimeout(() => {
if (gridData) {
return methods.getCellValuePrivate(
rowField,
rowValue,
columnField,
gridData
);
} else {
return methods.getCellValuePrivate(
rowField,
rowValue,
columnField,
this.config.gridData
);
}
});
}


It gets a value from the provided gridData argument or from the this.config.gridData. I have to use setTimeout, because in the directive I do some data manipulating and with using setTimeout I ensure, that I get the right data.

Now, in a component, where I use this directive, I simply look for it like this:

@ViewChild(EnhancedGridDirective) enhancedGridDirective!: EnhancedGridDirective;


And in ngAfterViewInit I call the beforementioned function, f. e.:

const val = this.enhancedGridDirective.getCellValue(
'category',
'cat 2',
'feb'
);
console.log(val);


Of course I get undefined in the console because of the setTimeout in the function.

But if I change the function like this:

async getCellValue(
rowField: string,
rowValue: any,
columnField: string,
gridData?: any[]
): Promise<any> {
new Promise((resolve) => {
setTimeout(() => {
if (gridData) {
resolve(
methods.getCellValuePrivate(
rowField,
rowValue,
columnField,
gridData
)
);
} else {
resolve(
methods.getCellValuePrivate(
rowField,
rowValue,
columnField,
this.config.gridData
)
);
}
});
});
}


And in the ngAfterViewInit then:

this.enhancedGridDirective
.getCellValue('category', 'cat 2', 'feb')
.then((v) => console.log(v));


I also get undefined.

So, how to solve this issue?

Continue reading...