import { Component, Injectable, ViewChild, ViewContainerRef, OnInit, NgModule, CUSTOM_ELEMENTS_SCHEMA, OnDestroy } from '@angular/core'; import { MatButtonModule, } from '@angular/material'; @Component({ selector: 'p3x-compile-test', template: `

P3X Angular Compile Example

Corifeus.com Wiki
How it works from the code in GitHub, some examples

Go ahead and inspect the elements and click away!!!

Template 1



Template 2



Template 3



Template 4 - Re-use the same context



Pure Router Link with JIT Angular

 


Router Link with p3x-angular-compile

` }) @Injectable() export class Page implements OnInit, OnDestroy { data1: string; data2: string = 'init'; data3: string = 'Just simple string red'; counter1: number = 0; counter2: number = 0; interval: any; dataRouterLink: string = '' compileForm: string = `` dataMaterialDefault: string = ` ` dataMaterial: string = ` ` dataMaterialModule: any = { // schemas: [CUSTOM_ELEMENTS_SCHEMA], // declarations: [], imports: [ MatButtonModule ], exports: [] } constructor( // private compileHtmlService: CompileService ) { } private update1() { this.counter1++; this.data1 = `
P3X Angular Compile
Click me via a angular compile!
{{ context.counter1}}
`; } public formClick() { alert('form click'); } private update2() { this.counter2++; this.data2 = `
Attribute
Click me via an other attribute!
{{ context.counter2}}
`; } chars: string = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ' getRandomChar() { return this.chars[Math.floor(Math.random() * (62 - 0)) + 0] } randomRouterLink() { let counter = 0; let randomString = ''; let randomString2 = ''; while (counter < 10) { counter++; randomString += this.getRandomChar(); randomString2 += this.getRandomChar(); } this.dataRouterLink = `${randomString}` this.dataMaterial = ` ${this.dataMaterialDefault}   ${randomString2} ` } ngOnInit() { this.update1(); this.update2(); this.randomRouterLink() /* 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); } }