import {
Component,
Injectable,
ViewChild,
ViewContainerRef,
OnInit,
NgModule,
CUSTOM_ELEMENTS_SCHEMA,
OnDestroy
} from '@angular/core';
import {CompileService} from '../../../src';
@Component({
selector: 'p3x-compile-test',
template: `
Data1
Container connected to Data1
Data2
Container2 connected to Data2
Data3
Hidden is working? If show, below should say "Click me via a service!"
If there was no "Click me via a service!" above, it works.
Data2 - This always visible
`
})
@Injectable()
export class Page implements OnInit, OnDestroy {
@ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;
@ViewChild('container2', {read: ViewContainerRef}) container2: ViewContainerRef;
data1: string;
data2: string = 'init';
data3: string = 'Just simple string red';
counter1: number = 0;
counter2: number = 0;
interval: any;
constructor(private compileHtmlService: CompileService) {
}
private async update1() {
this.counter1++;
this.data1 = `
Service
Click me via a service!
{{ context.counter1}}
`;
await this.compileHtmlService.compile({
template: this.data1,
container: this.container,
context: this,
onCompiled: (cmp: any) => {
console.log('container1 compiled, same template ');
}
})
}
private async update2() {
this.counter2++;
this.data2 = `
Attribute
Click me via an attribute!
{{ context.counter2}}
`;
await this.compileHtmlService.compile({
template: this.data2,
container: this.container2,
context: this,
onCompiled: (cmp: any) => {
console.log('container2 compiled, same template');
}
})
}
ngOnInit() {
this.update1();
this.update2();
/*
let is = false;
let newData = '123';
let defaultData = '';
let count = 0;
this.interval = setInterval(() => {
is = !is;
if (is) {
count++;
defaultData = defaultData + newData;
this.data3 = defaultData + defaultData;
if (count > 10) {
count = 0;
defaultData = newData;
}
} else {
this.data3 = '321
'
}
}, 1000)
*/
}
ngOnDestroy() {
clearInterval(this.interval);
}
}