Cacher is the code snippet organizer for pro developers

import { Component, OnInit, ViewChild } from '@angular/core';
import { GeneralService } from '@sg/experts-gateway/app/core/services/general.service';
import { DxDataGridComponent } from 'devextreme-angular';
import DevExpress from 'devextreme/bundles/dx.all';
import CustomStore from 'devextreme/data/custom_store';
import DataSource from 'devextreme/data/data_source';
import { throwError } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Component({
    selector: 'sg-list',
    templateUrl: './list.component.html',
})
export class ListComponent implements OnInit {
    dataSource: any;
    @ViewChild(DxDataGridComponent, { static: true }) grid: DxDataGridComponent;

    constructor(private readonly generalService: GeneralService) {
        this.editPermissionClick = this.editPermissionClick.bind(this);
    }

    ngOnInit(): void {
        this.initGrid();
        this.initDataSource();
    }

    editPermissionClick(): void {}

    private initGrid(): void {
        this.grid.remoteOperations = true;
        this.grid.allowColumnResizing = true;
        this.grid.paging = { enabled: true, pageSize: 10 };
    }
    private initDataSource(): void {
        this.dataSource = new DataSource(
            new CustomStore({
                key: 'guid',
                load: async (loadOptions: DevExpress.data.LoadOptions): Promise<any> => this.getData(loadOptions),
            })
        );
    }

    private async getData(loadOptions: DevExpress.data.LoadOptions): Promise<any> {
        return this.generalService
            .getUsersByDevexLoadOption(loadOptions)
            .pipe(
                catchError(err => {
                    return throwError(err);
                })
            )
            .toPromise();
    }
}