Catching loading event

Hello, I want to make a spinner indicating data being refreshed. But how can I catch event for data being loaded?

Im getting data this way:

this.source = new ServerDataSource(http, { endPoint: 'https://jsonplaceholder.typicode.com/photos' });

I tried to user LocalDataSource, and manually getting data on “onSearch”:

getData(modifiedData?) {
        this.loading = true;
        let sourceCopy = modifiedData ? modifiedData : this.source;
        let requestData = {
            filter: sourceCopy.getFilter(),
            paging: sourceCopy.getPaging(),
            sort: sourceCopy.getSort()
        }
        this.service.getData(requestData).then((data) => {
            this.source.load(data);
            this.loading = false;
        });
    }

This works for search input, but this way I’d have to write pagination component on my own, while the stock one is just fine.

Any ideas?

[Squidy06]

@MrPardeep Yup Take and import this: https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/server/serve.data-source.ts

In component:

constructor(http: Http) {
    this.http = http;
    this.source = new CustomServerDataSource(this.http, {
        endPoint: 'https://jsonplaceholder.typicode.com/posts?',
    });
    this.source.onUpdateStarted().subscribe(e => {
        setTimeout(() => {
            this.loading = true;
        });
    });
}
ngOnInit(): void {
    this.source.onChanged().subscribe(e => {
        setTimeout(() => {
            this.loading = false;
        });
    });
}

In your new data-source.ts

protected onUpdateStartedSource = new Subject<any>();
protected emitOnUpdateStarted(element: any) {
    this.onUpdateStartedSource.next(element);
}
onUpdateStarted(): Observable<any> {
    return this.onUpdateStartedSource.asObservable();
}

And add to your getElements() function in data-source.ts

this.emitOnUpdateStarted();

[imbrod]

@MrPardeep Yup Take and import this: https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/server/serve.data-source.ts

This link is broken. Does anybody have steps to create custom class from ServerDataSource? I managed to write something like this, but I guess there could be more elegant way:

export class MyDataSource extends ServerDataSource {
    constructor(http: HttpClient, conf?: ServerSourceConf | {}) {        
        super(http, conf);
        this.init();
      }     
      public init(): Promise<any> {
          let endPoint = `${environment.apiEndpoint}/${this.conf.endPoint}`;
          this.conf.endPoint = endPoint;
          this.conf.sortFieldKey = 'orderBy';
          this.conf.sortDirKey = 'sortDirection';
          this.conf.pagerPageKey = 'pageNumber';
          this.conf.pagerLimitKey = 'pageSize';
          this.conf.filterFieldKey = null;
          this.conf.totalKey = 'count';
          this.conf.dataKey = 'value';
          return super.getElements();
      }
}

call:

this.source = new MyDataSource(this.http, {
	endPoint: 'myMethod'
});