import {Component} from '@angular/core'; import {version} from '../../package.json'; import { MatButtonModule } from "@angular/material/button"; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { version = version data1: string; data2: string = 'init';

data3: string = '<span class="p3x-ng-compile-template">Just simple string</span><span class="p3x-ng-compile-template-intent">info</span>';

counter1: number = 0; counter2: number = 0; interval: any; dataRouterLink: string = '' compileForm: string = `` dataMaterialDefault: string = `

<button mat-button mat-flat-button color="accent" (click)="context.randomRouterLinkJit()">Generate new router link</button>

` dataMaterial: string = `

<button mat-button mat-flat-button color="accent" (click)="context.randomRouterLinkJit()">Generate new router link</button>

` dataMaterialModule: any = { // schemas: [CUSTOM_ELEMENTS_SCHEMA], // declarations: [], imports: [ MatButtonModule ], exports: [] } constructor( // private compileHtmlService: CompileService ) { } private update1() { this.counter1++; this.data1 = `

<div>P3X Angular Compile</div><button mat-button mat-flat-button color="accent" id="button-container" href="javascript:void(0);" (click)="context.update1()">Click me via Angular compile!</button> <div id="counter-container" class="p3x-ng-compile-template-intent">{{ context.counter1}}</div>

`; } public formClick() { alert('form click'); } private update2() { this.counter2++; this.data2 = `

<div>Attribute</div><button mat-button mat-flat-button color="accent" id="button-attribute" href="javascript:void(0);" (click)="context.update2()">Click me via an other attribute!</button>

<div id="counter-attribute" class="p3x-ng-compile-template-intent">{{ context.counter2}}</div>

`; } chars: string = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ' getRandomChar() { return this.chars[Math.floor(Math.random() * (62 - 0)) + 0] }

randomRouterLinkPure() {

let counter = 0; let randomString = ''; while (counter < 10) { counter++; randomString += this.getRandomChar(); }

this.dataRouterLink = `<a mat-button class="p3x-ng-compile-template-intent" href="javascript:void(0)" routerLink="${randomString}">${randomString}</a>`

} randomRouterLinkJit() { let counter = 0; let randomString2 = ''; while (counter < 10) { counter++; randomString2 += this.getRandomChar(); }

this.dataMaterial = `

${this.dataMaterialDefault} &nbsp; <a mat-button class="p3x-ng-compile-template-intent" href="javascript:void(0)" routerLink="${randomString2}">${randomString2}</a>

` } ngOnInit() { this.update1(); this.update2();

this.randomRouterLinkPure() this.randomRouterLinkJit()

/* let is = false; let newData = '<span>123</span>'; 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 = '<div>321</div>' } }, 1000) */ } ngOnDestroy() { clearInterval(this.interval); } }