Angular 8 support?

Software | Version(s)

Angular | 8.2.0 Angular-Slickgrid | 2.9.9

Context

Just upgraded from 7.2.1 to Angular 8 but angular-slickgrid stopped working

Expected Behavior

Current Behavior It throws an exception:

CaseListingComponent.html:16 ERROR ReferenceError: preHeaderH is not defined
    at getViewportHeight (slick.grid.js:2903)
    at SlickGrid.finishInitialization [as init] (slick.grid.js:492)
    at AngularSlickgridComponent.initialization (angular-slickgrid.js:11983)
    at AngularSlickgridComponent.ngAfterViewInit (angular-slickgrid.js:11941)
    at callProviderLifecycles (core.js:26694)
    at callElementProvidersLifecycles (core.js:26659)
    at callLifecycleHooksChildrenFirst (core.js:26641)
    at checkAndUpdateView (core.js:37047)
    at callViewAction (core.js:37403)
    at execComponentViewsAction (core.js:37331)

Code Sample

HTML:

   <angular-slickgrid gridId="caseListing"
                                       [columnDefinitions]="columnDefinitions"
                                       [gridOptions]="gridOptions"
                                       gridHeight="85vh"
                                       [dataset]="dataSource" 
                        (sgOnSelectedRowsChanged)="onSelectedRowsChanged($event.detail.eventData, $event.detail.args)"
                         (onAngularGridCreated)="angularGridReady($event)">
                    </angular-slickgrid>

@Component({
    selector: 'caseListing',
    templateUrl: './caseListing.component.html',
    styleUrls: ['./caseListing.component.css'],
    animations: [fadeInOut]
})

export class CaseListingComponent {
    angularGrid: AngularGridInstance;
    columnDefinitions: Column[];
    gridOptions: GridOption;

    dataSource: any;
    dataSourceFiltered: any;
    currentFilter = 'None';
    facColumn = {
        id: 'fac', name: 'Facility', field: 'facility', sortable: true, minWidth: 0,
        type: FieldType.string, filterable: true, filter: { model: Filters.compoundInput }
    };

    listingPercent: string = '50%';
    detailPercent: string = '50%';

    constructor(private translate: TranslateService, private endpointService : EndpointFactory, private caseService: CaseService, private apiService: GenericApiService, private global: Globals) {
        this.global.onFacChanged.subscribe(fac => this.onFacChanged(fac));
        this.global.onResChanged.subscribe(resId => this.onResChanged(resId));
    }

    ngOnChanges() {
        this.defineColumns();
        this.defineOptions();
    }

    onFacChanged(fac: any) {
        this.endpointService.getApiData("Main", this.apiService.StringFormat("Cases?FacId={0}&ResId={1}", this.global.currentFac.id, this.global.selectedResId)).subscribe((data: Response) => this.processData(data));
        //slick grid has a bug that if i dont refresh the config each time it remembers old data
        this.ngOnChanges();
    }

    onResChanged(resId: any) {
        this.endpointService.getApiData("Main", this.apiService.StringFormat("Cases?FacId={0}&ResId={1}", this.global.currentFac.id, resId)).subscribe((data: Response) => this.processData(data));
        this.ngOnChanges();
    }

    defineColumns() {
        let that = this;
        this.columnDefinitions = [
            {
                id: 'title', name: 'Case Title', field: 'title', sortable: true, minWidth: 0,
                type: FieldType.string,
                filterable: true, filter: { model: Filters.compoundInput },
                formatter: function (row, cell, value) {
                    if (that.dataSource.length < 1) return '';
                    return "<i class=\"fa fa-circle oval-sm\" aria-hidden=\"true\" style=\"color: " + that.dataSource[row].statusColor + " \"></i> &nbsp;&nbsp;" + value;
                },

            },
            {
                id: 'dates', name: 'Dates', field: 'dates', sortable: true, minWidth: 0,
                type: FieldType.string, filterable: true, filter: { model: Filters.compoundInput }
            },
            {
                id: 'res', name: 'Resident', field: 'resName', sortable: true, minWidth: 0,
                type: FieldType.string, filterable: true, filter: { model: Filters.compoundInput }
            },
            this.facColumn

        ];
        //if currently in a facility no need for the facility column
        if (this.global.currentFac.name)
            this.columnDefinitions = this.columnDefinitions.filter(cd => cd.name != this.facColumn.name);
            //this.columnDefinitions.pop();

    }

    defineOptions() {
        this.gridOptions = {
            autoResize: {
                containerId: 'demo-container'
            },
            fullWidthRows: true,
            rowHeight: 60,
            enableCellNavigation: true,
            enableColumnPicker: true,
            enableExcelCopyBuffer: true,
            enableFiltering: true,
            enableAutoResize: true,
            forceFitColumns: true,
            i18n: this.translate,
        };
    }

    ngOnInit() {
        this.defineColumns();
        this.defineOptions();
        this.onFacChanged(undefined);
    }

    OnSplitterChange() {
        this.angularGrid.resizerService.resizeGrid();
    }

    angularGridReady(angularGrid: any) {
        this.angularGrid = angularGrid;
    }

    left = 50;
    right = 50;
    enlarge(area) {
        if (area == 'left') {
            this.left = 50;
            this.right = 50;
        }
        else {
            this.left = 20;
            this.right = 80;
        }
    }

    processData(data: Response) {
        this.dataSource = data;
        this.dataSourceFiltered = data;
        this.angularGrid.dataView.refresh();
        if (this.currentFilter && this.currentFilter != 'None')
            this.filter(this.currentFilter);
    }

    selectedCaseId;
    onSelectedRowsChanged(e, args) {
        if (args.rows.length > 0) {
            let selectedCase = this.angularGrid.slickGrid.getDataItem(args.rows[0]);
            if (selectedCase) this.selectedCaseId = selectedCase.id;
        }

    }

    filter(status) {
        this.currentFilter = status;
        if (status == 'None')
            this.unfilter();
        else {
            this.dataSource = this.dataSourceFiltered.filter(r => r.status == status);
            this.angularGrid.dataView.refresh();
        }
    }

    unfilter() {
        this.dataSource = this.dataSourceFiltered;
        this.angularGrid.dataView.refresh();
    }
}

Included scripts in angular.json:

"node_modules/jquery/dist/jquery.min.js", 
"node_modules/slickgrid/lib/jquery-ui-1.11.3.min.js"

Thank you so much, Daniel

[ghiscoding]

@tannenbaums @bocall So for Angular 8, what I found after troubleshooting the PR that @bocall made for the upgrade, is that ng update switches the browser/code target to ES2015 and that doesn’t play well with SlickGrid which is all written in plain old javascript. If you edit your tsconfig.json file and you switch back the target to "target": "es5", then it’s working fine.

The culprit is this following explanation from Angular 8 team

Differential loading of modern JavaScript From Angular 8 onwards, the CLI is going to produce separate bundles for legacy (ES5) and the modern JavaScript bundles (ES2015+), which will be the part of the overall build process.

So I added an Angular 8 note in the readme.

The complete troubleshoot I’ve done can be found under the demos here

One final note, this might be fixable in the future, but some changes need to be done on the core lib SlickGrid for that to work.

Also note that all the angular-slickgrid-demos were updated to Angular 8.2, thanks to @bocall

[bocall]

@ghiscoding Thanks for the quick responses today. I’ll try and open a PR with 6pac/SlickGrid tomorrow to get that additional var added.

With these two issues fixed it looks like you’ll be sorted for Angular 8.