ng2 component inheritance

datatable.component.ts

import { isNil, isString, isEmpty, isObject, isNumber, get } from 'lodash';
import { IDatatableConf, IDatatableCol } from '../../interfaces/shared.interface';
import { ModelService } from '../../services/model.service';
import { DatatableComponent as NgxDatatableComponent } from '../../lib/ng2-datatable/index'

export class DatatableComponent {
  config: IDatatableConf = {
    headerHeight: 40,
    footerHeight: 40,
    rowHeight: 'auto',
    detailRowHeight: 'auto',
    columnMode: 'force',
    scrollbarH: true,
    reorderable: false,
    cssClasses: {
      sortAscending: 'fa fa-fw fa-angle-down',
      sortDescending: 'fa fa-fw fa-angle-up',
      pagerLeftArrow: 'fa fa-angle-left',
      pagerRightArrow: 'fa fa-angle-right',
      pagerPrevious: 'fa fa-angle-double-left',
      pagerNext: 'fa fa-angle-double-right'
    },
    externalPaging: true,
    externalSorting: true
  };
  cols: IDatatableCol[];
  cellsBeingEdited: {[key: string]: boolean} = {};
  fallbackVal = 'Nincs';
  
  // would love to inject ViewChild from the derived class (AuditLogComponent)'s template, is this possible?
  // @ViewChild(NgxDatatableComponent) datatable;

  constructor(public model: ModelService) {
  }

  handleKeyup(evt: KeyboardEvent, row, colIndex) {
    if (evt.keyCode === 27) {
      this.setEditing(row, colIndex, false);
    }
  }

  getCol(colIndex, prop) {
    return get(this.cols[colIndex], prop);
  }

  getCellValue(row, colIndex, config: {i?: number; k?: string} = {}) {
    let val = row[this.cols[colIndex].prop];

    if (isNil(val) || isString(val) && isEmpty(val)) {
      val = this.fallbackVal;
    }
    else if (isObject(val) && config.k) {
      val = val[config.k] || val;
    }

    return val;
  }

  setEditing(row, colIndex, isEditing) {
    this.cellsBeingEdited[`row-${row.$$index}__col-${this.cols[colIndex].prop}`] = isEditing;
  }

  getEditing(row, colIndex) {
    return this.cellsBeingEdited[`row-${row.$$index}__col-${this.cols[colIndex].prop}`];
  }

  onSort(evt) {
    let sort = evt.sorts[0].prop;
    let order = evt.sorts[0].dir.toUpperCase();
    return this.model.getListAndPopulate({sort, order});
  }

  onPage(evt) {
    let limit = evt.limit;
    let offset = evt.offset;
    return this.model.getListAndPopulate({limit, offset});
  }

  // https://github.com/swimlane/ngx-datatable/issues/425#issuecomment-272642571
  toggleDetailRow(datatable, row) {
    datatable.toggleExpandRow(row);
  }
}

PartnerListComponent.component.ts

import { Component, OnInit, ViewEncapsulation, Renderer } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { PartnerModel } from '../../../shared/models/partner.model';
import { ViewModel } from '../../../shared/models/view.model';
import { IDatatableCol, IDatatableConf } from '../../../shared/interfaces/shared.interface';
import { DatatableComponent } from '../../../shared/components/datatable/datatable.component';

@Component({
  selector: 'app-partner-list',
  encapsulation: ViewEncapsulation.None,
  templateUrl: './partner-list.component.html'
})
export class PartnerListComponent extends DatatableComponent implements OnInit {
  config: IDatatableConf;
  cols: IDatatableCol[] = [
    { name: 'ID', prop: 'id', sortable: false },
    { name: 'Név', prop: 'name', sortable: false },
    { name: 'Aktív', prop: 'isActive', sortable: false },
    { name: 'Logó', prop: 'logoPath', sortable: false }
  ];

  constructor(public partnerModel: PartnerModel, public route: ActivatedRoute, public viewModel: ViewModel, r: Renderer) {
    super(partnerModel, r);
    this.config = Object.assign({}, this.config, {
      externalPaging: true,
      externalSorting: true
    });
  }

  ngOnInit() {
    this.partnerModel.populate(this.route.snapshot.data);
  }
}