-import {Component, OnInit, ViewChild, Input} from '@angular/core';
-import {Compiler, ViewContainerRef, NgModule} from '@angular/core';
+import {Component, OnInit, ViewChild, Input, Output} from '@angular/core';
+import {Compiler, ViewContainerRef, NgModule, EventEmitter} from '@angular/core';
import {HttpClient} from '@angular/common/http';
/**
* Render HTML content derived from a string or a URL path,
* interpolating the provided context data along the way.
+ *
+ * Content text or URL values may be provided as Inputs or passed
+ * directly to component build* methods.
*/
@Component({
@ViewChild('container', {read: ViewContainerRef})
private container: ViewContainerRef;
+ @Input() content: string;
+ @Input() contentUrl: string;
+ @Input() contextData: any;
+
+ // Emits true if the content was render-able, false otherwise
+ @Output() onComplete: EventEmitter<boolean>;
+
constructor(
private compiler: Compiler,
private http: HttpClient
- ) {}
+ ) {
+ this.onComplete = new EventEmitter<boolean>();
+ }
ngOnInit() {
+ if (this.contentUrl) {
+ this.buildFromUrl(this.contentUrl, this.contextData);
+ } else if (this.content) {
+ this.buildFromString(this.content, this.contextData);
+ }
}
buildFromString(template: string, context: any = {}) {
- this.addComponent(template, context);
+ try {
+ this.addComponent(template, context);
+ } catch (err) {
+ console.error(`Error rendering dynamic content: ${err}`);
+ this.onComplete.emit(false);
+ return;
+ }
+
+ this.onComplete.emit(true);
}
// Returns a promise which resolves if the requested URL
- // was found, rejected otherwise.
+ // was found and was render-able, rejected otherwise.
buildFromUrl(url: string, context: any = {}): Promise<void> {
return this.http.get(url, {responseType: 'text'}).toPromise()
.then(
html => {
console.debug(`Loaded dynamic content from: ${url}`);
- this.addComponent(html, context);
+ try {
+ this.addComponent(html, context);
+ } catch (err) {
+ const msg = `Error rendering dynamic content: ${url}`;
+ console.error(msg);
+ this.onComplete.emit(false);
+ return Promise.reject(msg);
+ }
+ this.onComplete.emit(true);
},
notFound => {
console.debug(
`Unable to fetch dynamic component URL: ${url}`, notFound);
+ this.onComplete.emit(false);
}
)
}
this.store = store;
this.format = format;
this.pager = new Pager();
- this.pager.limit = 10; // TODO config
+ this.pager.limit = 10;
this.rowSelector = new GridRowSelector();
this.toolbarButtons = [];
this.toolbarActions = [];
if (this.pageChanges) { return; }
this.pageChanges = this.pager.onChange$.subscribe(
val => this.dataSource.requestPage(this.pager));
- // TODO: index rows as they arrive
}
ignorePager() {
getColumnTextContent(row: any, col: GridColumn): string {
if (col.cellTemplate) {
// TODO
+ // Extract the text content from the rendered template.
} else {
return this.getRowColumnValue(row, col);
}
gridDataSource: GridDataSource = new GridDataSource();
btSource: GridDataSource = new GridDataSource();
- btGridTestContext: any = {hello : 'world'};
+ world = 'world'; // for local template version
+ btGridTestContext: any = {hello : this.world};
testDate: any;
};
this.dynamic.buildFromString(
- '<b>HELLO {{world}}</b>', {world: 'world'});
+ '<b>HELLO {{world}}</b>', {world: this.world});
/*
// Assumes a file on the server at this URL
this.dynamicUrl.buildFromUrl(
- '/test-template.html', {world: 'world'});
+ '/test-template.html', {world: this.world});
*/
}
doPrint() {
this.printer.print({
template: this.printTemplate,
- contextData: {world : 'world'},
+ contextData: {world : this.world},
printContext: 'default'
});
}