-
Notifications
You must be signed in to change notification settings - Fork 27
/
table-cell.component.ts
73 lines (64 loc) · 1.94 KB
/
table-cell.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import {
Component,
ComponentFactoryResolver,
ComponentRef,
Injector,
Input,
AfterViewInit,
OnDestroy,
ViewChild,
ViewContainerRef
} from '@angular/core';
import { ColumnState } from '../models/interfaces';
@Component({
/* tslint:disable-next-line */
selector: '[super-table-cell]',
template: `
<span *ngIf="!column.def.component" [attr.title]="getFormattedValue()">{{ getFormattedValue() }}</span>
<span *ngIf="column.def.component" #cmpContainer></span>
`,
styles: [`
:host {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
`]
})
export class TableCellComponent implements AfterViewInit, OnDestroy {
@Input() row: any;
@Input() column: ColumnState;
@ViewChild('cmpContainer', { read: ViewContainerRef }) cmpContainer: ViewContainerRef;
private componentRef: ComponentRef<any>;
constructor(private viewContainer: ViewContainerRef, private resolver: ComponentFactoryResolver) {}
getValue(): any {
return this.row[this.column.def.key];
}
getFormattedValue(): any {
if (this.column.def.format) {
return this.column.def.format(this.getValue(), this.row, this.column);
}
return this.getValue();
}
ngAfterViewInit() {
if (this.column.def.component) {
if (this.componentRef) {
this.componentRef.destroy();
}
const cmpFactory = this.resolver.resolveComponentFactory(this.column.def.component);
const ctxInjector: Injector = this.cmpContainer.injector;
this.componentRef = this.cmpContainer.createComponent(cmpFactory, 0, ctxInjector);
const instance: any = this.componentRef.instance;
instance['row'] = this.row;
instance['column'] = this.column;
instance['key'] = this.column.def.key;
instance['value'] = this.getValue();
this.componentRef.changeDetectorRef.detectChanges();
}
}
ngOnDestroy() {
if (this.componentRef) {
this.componentRef.destroy();
}
}
}