Catching loading event

[Squidy06]

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?

[erpardeepjain]

@Squidy06 Any Updates on this?

[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();

[erpardeepjain]

@Squidy06 , So you made changes in the existing package/Library? If so this is not what I want to do, because this caused a problem while updating to new version of anular/ng2-smart-table.

[mykeels]

Any update on this please?

[Squidy06]

@mykeels @MrPardeep better move to Angular Material Table.

https://material.angular.io/components/table/overview

[DanialV]

any update on this?

[caallondono]

Using suggestion by @Squidy06, I did this:

1. I created a new file in my project (to avoid package dependencie):

import {ServerDataSource} from 'ng2-smart-table';
import {HttpClient} from '@angular/common/http';
import {ServerSourceConf} from 'ng2-smart-table/lib/lib/data-source/server/server-source.conf';
import {Observable, Subject} from 'rxjs';

export class CustomServerDataSource extends ServerDataSource {
  constructor(http: HttpClient, conf?: ServerSourceConf | {}) {
    super(http, conf);
  }

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

  getElements(): Promise<any> {
    const element = super.getElements();
    this.emitOnUpdateStarted(element);
    return element;
  }
}

2. In my component, I did this:

@Component({..})
export class MyComponent implements OnInit {
  public source: CustomServerDataSource;
  public isLoadingData = false;

  constructor() {
    this.source = new CustomServerDataSource(http, {
      endPoint: environment.apiMainUrl + 'settings'
    });
    this.source.onUpdateStarted().subscribe(() => {
      this.isLoadingData = true;
    });
  }

  ngOnInit(): void {
    this.source.onChanged().subscribe(() => {
      this.isLoadingData = false;
    });
  }
}

And It works like a charm!

Thanks @Squidy06

[marcmosco]

Using suggestion by @Squidy06, I did this:

1. I created a new file in my project (to avoid package dependencie):

import {ServerDataSource} from 'ng2-smart-table';
import {HttpClient} from '@angular/common/http';
import {ServerSourceConf} from 'ng2-smart-table/lib/lib/data-source/server/server-source.conf';
import {Observable, Subject} from 'rxjs';

export class CustomServerDataSource extends ServerDataSource {
  constructor(http: HttpClient, conf?: ServerSourceConf | {}) {
    super(http, conf);
  }

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

  getElements(): Promise<any> {
    const element = super.getElements();
    this.emitOnUpdateStarted(element);
    return element;
  }
}

2. In my component, I did this:

@Component({..})
export class MyComponent implements OnInit {
  public source: CustomServerDataSource;
  public isLoadingData = false;

  constructor() {
    this.source = new CustomServerDataSource(http, {
      endPoint: environment.apiMainUrl + 'settings'
    });
    this.source.onUpdateStarted().subscribe(() => {
      this.isLoadingData = true;
    });
  }

  ngOnInit(): void {
    this.source.onChanged().subscribe(() => {
      this.isLoadingData = false;
    });
  }
}

And It works like a charm!

Thanks @Squidy06

And for the html? There is no spinner to trigger inside the table and I don't want destroy the table while the data is loading.

[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'
});