material-dynamic-table
Version:
Dynamic table component for angular built on top of angular material table. It offers sorting, pagination, filtering per column and the ability to specify content types and components used for displaying them.
44 lines • 6.56 kB
JavaScript
import { Component, ComponentFactoryResolver, Input, ViewChild, ChangeDetectionStrategy } from '@angular/core';
import { CellDirective } from './cell.directive';
import { CellService } from './cell-types/cell.service';
import { ColumnConfig } from '../column-config.model';
import * as i0 from "@angular/core";
import * as i1 from "./cell-types/cell.service";
import * as i2 from "./cell.directive";
export class TableCellComponent {
constructor(cellService, componentFactoryResolver) {
this.cellService = cellService;
this.componentFactoryResolver = componentFactoryResolver;
}
ngOnInit() {
this.initCell();
}
initCell() {
const cellComponent = this.cellService.getCell(this.column.type);
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(cellComponent);
const viewContainerRef = this.cellHost.viewContainerRef;
viewContainerRef.clear();
const componentRef = viewContainerRef.createComponent(componentFactory);
const cell = componentRef.instance;
cell.row = this.row;
cell.column = this.column;
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableCellComponent, deps: [{ token: i1.CellService }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: TableCellComponent, selector: "mdt-table-cell", inputs: { row: "row", column: "column" }, viewQueries: [{ propertyName: "cellHost", first: true, predicate: CellDirective, descendants: true, static: true }], ngImport: i0, template: '<ng-template mdtCellHost></ng-template>', isInline: true, dependencies: [{ kind: "directive", type: i2.CellDirective, selector: "[mdtCellHost]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: TableCellComponent, decorators: [{
type: Component,
args: [{
selector: 'mdt-table-cell',
template: '<ng-template mdtCellHost></ng-template>',
changeDetection: ChangeDetectionStrategy.OnPush
}]
}], ctorParameters: () => [{ type: i1.CellService }, { type: i0.ComponentFactoryResolver }], propDecorators: { cellHost: [{
type: ViewChild,
args: [CellDirective, { static: true }]
}], row: [{
type: Input
}], column: [{
type: Input
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGFibGUtY2VsbC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9tYXRlcmlhbC1keW5hbWljLXRhYmxlL3NyYy9saWIvdGFibGUtY2VsbC90YWJsZS1jZWxsLmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLHdCQUF3QixFQUFFLEtBQUssRUFBRSxTQUFTLEVBQVUsdUJBQXVCLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDdkgsT0FBTyxFQUFFLGFBQWEsRUFBRSxNQUFNLGtCQUFrQixDQUFDO0FBQ2pELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSwyQkFBMkIsQ0FBQztBQUV4RCxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0sd0JBQXdCLENBQUM7Ozs7QUFPdEQsTUFBTSxPQUFPLGtCQUFrQjtJQU0zQixZQUNxQixXQUF3QixFQUN4Qix3QkFBa0Q7UUFEbEQsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFDeEIsNkJBQXdCLEdBQXhCLHdCQUF3QixDQUEwQjtJQUFJLENBQUM7SUFFNUUsUUFBUTtRQUNKLElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztJQUNwQixDQUFDO0lBRUQsUUFBUTtRQUNKLE1BQU0sYUFBYSxHQUFHLElBQUksQ0FBQyxXQUFXLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDakUsTUFBTSxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsd0JBQXdCLENBQUMsdUJBQXVCLENBQUMsYUFBYSxDQUFDLENBQUM7UUFDOUYsTUFBTSxnQkFBZ0IsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLGdCQUFnQixDQUFDO1FBQ3hELGdCQUFnQixDQUFDLEtBQUssRUFBRSxDQUFDO1FBQ3pCLE1BQU0sWUFBWSxHQUFHLGdCQUFnQixDQUFDLGVBQWUsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQ3hFLE1BQU0sSUFBSSxHQUFHLFlBQVksQ0FBQyxRQUF5QixDQUFDO1FBQ3BELElBQUksQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLEdBQUcsQ0FBQztRQUNwQixJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxNQUFNLENBQUM7SUFDOUIsQ0FBQztrSUF2QlEsa0JBQWtCO3NIQUFsQixrQkFBa0IsMElBQ2hCLGFBQWEsOERBSmQseUNBQXlDOzs0RkFHMUMsa0JBQWtCO2tCQUw5QixTQUFTO21CQUFDO29CQUNQLFFBQVEsRUFBRSxnQkFBZ0I7b0JBQzFCLFFBQVEsRUFBRSx5Q0FBeUM7b0JBQ25ELGVBQWUsRUFBRSx1QkFBdUIsQ0FBQyxNQUFNO2lCQUNsRDt1SEFFK0MsUUFBUTtzQkFBbkQsU0FBUzt1QkFBQyxhQUFhLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFO2dCQUVqQyxHQUFHO3NCQUFYLEtBQUs7Z0JBQ0csTUFBTTtzQkFBZCxLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBDb21wb25lbnRGYWN0b3J5UmVzb2x2ZXIsIElucHV0LCBWaWV3Q2hpbGQsIE9uSW5pdCwgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgQ2VsbERpcmVjdGl2ZSB9IGZyb20gJy4vY2VsbC5kaXJlY3RpdmUnO1xyXG5pbXBvcnQgeyBDZWxsU2VydmljZSB9IGZyb20gJy4vY2VsbC10eXBlcy9jZWxsLnNlcnZpY2UnO1xyXG5pbXBvcnQgeyBDZWxsQ29tcG9uZW50IH0gZnJvbSAnLi9jZWxsLXR5cGVzL2NlbGwuY29tcG9uZW50JztcclxuaW1wb3J0IHsgQ29sdW1uQ29uZmlnIH0gZnJvbSAnLi4vY29sdW1uLWNvbmZpZy5tb2RlbCc7XHJcblxyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnbWR0LXRhYmxlLWNlbGwnLFxyXG4gICAgdGVtcGxhdGU6ICc8bmctdGVtcGxhdGUgbWR0Q2VsbEhvc3Q+PC9uZy10ZW1wbGF0ZT4nLFxyXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcclxufSlcclxuZXhwb3J0IGNsYXNzIFRhYmxlQ2VsbENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XHJcbiAgICBAVmlld0NoaWxkKENlbGxEaXJlY3RpdmUsIHsgc3RhdGljOiB0cnVlIH0pIGNlbGxIb3N0OiBDZWxsRGlyZWN0aXZlO1xyXG5cclxuICAgIEBJbnB1dCgpIHJvdzogb2JqZWN0O1xyXG4gICAgQElucHV0KCkgY29sdW1uOiBDb2x1bW5Db25maWc7XHJcblxyXG4gICAgY29uc3RydWN0b3IoXHJcbiAgICAgICAgcHJpdmF0ZSByZWFkb25seSBjZWxsU2VydmljZTogQ2VsbFNlcnZpY2UsXHJcbiAgICAgICAgcHJpdmF0ZSByZWFkb25seSBjb21wb25lbnRGYWN0b3J5UmVzb2x2ZXI6IENvbXBvbmVudEZhY3RvcnlSZXNvbHZlcikgeyB9XHJcblxyXG4gICAgbmdPbkluaXQoKSB7XHJcbiAgICAgICAgdGhpcy5pbml0Q2VsbCgpO1xyXG4gICAgfVxyXG5cclxuICAgIGluaXRDZWxsKCkge1xyXG4gICAgICAgIGNvbnN0IGNlbGxDb21wb25lbnQgPSB0aGlzLmNlbGxTZXJ2aWNlLmdldENlbGwodGhpcy5jb2x1bW4udHlwZSk7XHJcbiAgICAgICAgY29uc3QgY29tcG9uZW50RmFjdG9yeSA9IHRoaXMuY29tcG9uZW50RmFjdG9yeVJlc29sdmVyLnJlc29sdmVDb21wb25lbnRGYWN0b3J5KGNlbGxDb21wb25lbnQpO1xyXG4gICAgICAgIGNvbnN0IHZpZXdDb250YWluZXJSZWYgPSB0aGlzLmNlbGxIb3N0LnZpZXdDb250YWluZXJSZWY7XHJcbiAgICAgICAgdmlld0NvbnRhaW5lclJlZi5jbGVhcigpO1xyXG4gICAgICAgIGNvbnN0IGNvbXBvbmVudFJlZiA9IHZpZXdDb250YWluZXJSZWYuY3JlYXRlQ29tcG9uZW50KGNvbXBvbmVudEZhY3RvcnkpO1xyXG4gICAgICAgIGNvbnN0IGNlbGwgPSBjb21wb25lbnRSZWYuaW5zdGFuY2UgYXMgQ2VsbENvbXBvbmVudDtcclxuICAgICAgICBjZWxsLnJvdyA9IHRoaXMucm93O1xyXG4gICAgICAgIGNlbGwuY29sdW1uID0gdGhpcy5jb2x1bW47XHJcbiAgICB9XHJcbn1cclxuIl19