Component is loaded before data is available from a service

[nupurkul]

hello,

I am developing an application using ADF and Alfresco Process Services (APS).

I am using <adf-tasklist> component to display tasks for a particuar user.

However, I want to customize the way task list appears by default.

I want to add requester name and some start form field columns. For this reason I used a service to get process instance after we get task data from taskListService. However, service to get process instance is asynchronous. So, taskList component is loaded before the data from process instance service is available.

So, how do we prefetch the data from process instance service before component renders the task list view?

[dvuika · Accepted solution]

Simple flag is the first thing that comes to my mind.

<component *ngIf="!isLoading">...</component>‍
<progress-spinner *ngIf="isLoading"></progress-spinner>‍‍‍‍‍

And set this flag once you finished loading your data

this.isLoading = true;

someMethod().subscribe(() => {
  // do some other stuff
  this.isLoading = false
});‍‍‍‍‍‍

In this case you delay showing the list and display some progress spinner at the same time

[nupurkul]

Thanks for your answer.

I tried to set 'isLoading' to false in my method but the component was not loaded again. So, I thought that component is loaded initially and only once. Is it true?

If not, how to bind component with 'isLoading' property?

[dvuika]

I gave just rough example how to achieve what you want. For the details please refer to Angular guides, like Angular Docs