import { Component, Injectable, ViewChild, ViewContainerRef, OnInit, NgModule, CUSTOM_ELEMENTS_SCHEMA, OnDestroy } from '@angular/core'; /* import { MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatCommonModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatGridListModule, MatIconModule, MatInputModule, MatLineModule, MatListModule, MatMenuModule, MatNativeDateModule, MatOptionModule, MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, // OverlayContainer, // MatSelectionList, } from '@angular/material'; */ import { MatButtonModule, } from '@angular/material'; @Component({ selector: 'p3x-compile-test', template: `

Some helper URL links

Corifeus.com Wiki
How it works from the code in GitHub
How the actual Angular Compile looks like

Data1


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


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 = ` ${randomString2}
${this.dataMaterialDefault} ` } 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); } }