I am currently working on an Angular application where I have a button that triggers a click event. The method being called is asynchronous and involves subscribing to an observable. My goal is to call player.start() only after the listItems.getData() method has completed its execution. However, the challenge lies in the fact that getData() is invoked in the HTML template, making it difficult to catch the completion event and then trigger the start() method.
In player.html:
<button color="primary" (click)="listItems.getData()" ...
In ListItems.ts:
export class ListItems {
...
getData() {
/**
** Since getData() is invoked in the HTML context, capturing the result inside a TypeScript class becomes challenging
**/
...
return this.http.get(url).subscribe(res => {
this.data = res;
}
}
}
In player.ts:
export class Player {
constructor(public listItems: ListItems) {
}
start() {
/**
** The start method should only be executed once listItems.data has been populated with data
**/
let allData = this.listItems.data.replace('\n', '');
....
}
....
}