1. angular-compile.git
  2. test
  3. angular-webpack
  4. angular
  5. page.ts
 RSS Git Download  Clone
Raw View History
Blames found: 97 Mode: application/typescript Binary: false


Hang on, we reloading big blames...
 f46e4d96
import { Component, Injectable, ViewChild, ViewContainerRef,
 69db3407
OnInit, NgModule, CUSTOM_ELEMENTS_SCHEMA,
 db3e80f5
OnDestroy
 f46e4d96
} from '@angular/core';
 09d923aa
 6cee87e1
import { MatButtonModule,
 2e3c6c1e
} from '@angular/material/button';
 6cee87e1
 83396ced
 f46e4d96
@Component({ selector: 'p3x-compile-test',
 db3e80f5
template: `
 2ac789d6
<div style="margin-top: 10px; margin-bottom: 10px; max-width: 700px; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px;"> <mat-card> <div style="float: right">
 2e3c6c1e
<cory-mat-translation-button></cory-mat-translation-button>
 81c61859
<br/> <cory-mat-theme-button ></cory-mat-theme-button>
 83396ced
</div>
 2e3c6c1e
 2ac789d6
<h1>P3X Angular Compile Example</h1>
 2e3c6c1e
<a class="mat-title" href="https://pages.corifeus.com/angular-compile">Corifeus.com Wiki</a>
 2ac789d6
<br/> <a href="https://github.com/patrikx3/angular-compile/blob/master/test/angular-webpack/angular/page.ts">How it works from the code in GitHub, some examples</a>
 2e3c6c1e
 2ac789d6
<br/> <br/> <strong>Go ahead and inspect the elements and click away!!!</strong>
 2e3c6c1e
 2ac789d6
<br/> <br/> <mat-divider></mat-divider>
 2e3c6c1e
 2ac789d6
<h3>Template 1</h3> <div [p3x-compile]="data1" [p3x-compile-ctx]="this" class="p3x-angular-compile-element"></div>
 2e3c6c1e
 2ac789d6
<br/> <br/> <mat-divider></mat-divider>
 2e3c6c1e
 2ac789d6
<h3>Template 2</h3> <div [p3x-compile]="data2" [p3x-compile-ctx]="this" class="p3x-angular-compile-element"></div>
 2e3c6c1e
 2ac789d6
<br/> <br/> <mat-divider></mat-divider>
 2e3c6c1e
 2ac789d6
<h3>Template 3</h3> <div [p3x-compile]="data3" [p3x-compile-ctx]="this" class="p3x-angular-compile-element"></div>
 2e3c6c1e
 2ac789d6
<br/> <br/> <mat-divider></mat-divider>
 2e3c6c1e
 2ac789d6
<h3>Template 4 - Re-use the same context</h3> <div *ngIf="true" [p3x-compile]="data2" [p3x-compile-ctx]="this" class="p3x-angular-compile-element"></div>
 2e3c6c1e
 2ac789d6
<br/> <br/> <mat-divider></mat-divider>
 2e3c6c1e
 2ac789d6
<h3>Pure Router Link with JIT Angular</h3> <button mat-button mat-raised-button color="primary" (click)="randomRouterLink()">Generate new router link</button> &nbsp; <span [p3x-compile]="dataRouterLink" [p3x-compile-ctx]="this" class="p3x-angular-compile-element"></span>
 2e3c6c1e
 2ac789d6
<br/> <br/> <mat-divider></mat-divider> <br/>
 2e3c6c1e
 2ac789d6
<h3>Router Link with p3x-angular-compile</h3> <div [p3x-compile]="dataMaterial" [p3x-compile-ctx]="this" [p3x-compile-module]="dataMaterialModule" class="p3x-angular-compile-element"></div>
 2e3c6c1e
 2ac789d6
</mat-card> </div>
 ff48999f
`
 f46e4d96
}) @Injectable()
 db3e80f5
export class Page implements OnInit, OnDestroy {
 f46e4d96
data1: string;
 ff48999f
data2: string = 'init';
 f46e4d96
 ff48999f
data3: string = 'Just simple string <span style="color: red;">red</span>';
 db3e80f5
 ff48999f
counter1: number = 0; counter2: number = 0;
 f46e4d96
 db3e80f5
interval: any;
 51ec9f40
dataRouterLink: string = ''
 83396ced
compileForm: string = `` dataMaterialDefault: string = ` <button mat-button mat-raised-button color="primary" (click)="context.randomRouterLink()">Generate new router link</button> ` dataMaterial: string = ` <button mat-button mat-raised-button color="primary" (click)="context.randomRouterLink()">Generate new router link</button> `
 63831028
dataMaterialModule: any = {
 83396ced
// schemas: [CUSTOM_ELEMENTS_SCHEMA], // declarations: [],
 63831028
imports: [ MatButtonModule ], exports: [] }
 fb0911e3
 c605ea6f
constructor(
 63831028
// private compileHtmlService: CompileService
 c605ea6f
) {
 f46e4d96
}
 c605ea6f
private update1() {
 f46e4d96
this.counter1++; this.data1 = `
 51ec9f40
<div>P3X Angular Compile</div><a id="button-container" href="javascript:void(0);" (click)="context.update1()">Click me via a angular compile!</a>
 f46e4d96
<div id="counter-container">{{ context.counter1}}</div> `; }
 29830a38
public formClick() {
 fb0911e3
alert('form click'); }
 c605ea6f
private update2() {
 f46e4d96
this.counter2++; this.data2 = `
 51ec9f40
<div>Attribute</div><a id="button-attribute" href="javascript:void(0);" (click)="context.update2()">Click me via an other attribute!</a>
 f46e4d96
<div id="counter-attribute">{{ context.counter2}}</div> `;
 ff48999f
 f46e4d96
}
 ff48999f
 51ec9f40
chars: string = 'abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ' getRandomChar() { return this.chars[Math.floor(Math.random() * (62 - 0)) + 0] } randomRouterLink() { let counter = 0; let randomString = '';
 83396ced
let randomString2 = '';
 63831028
 51ec9f40
while (counter < 10) { counter++; randomString += this.getRandomChar();
 83396ced
randomString2 += this.getRandomChar();
 51ec9f40
} this.dataRouterLink = `<a href="javascript:void(0)" routerLink="${randomString}">${randomString}</a>`
 83396ced
this.dataMaterial = `
 e61654aa
${this.dataMaterialDefault} &nbsp; <a href="javascript:void(0)" routerLink="${randomString2}">${randomString2}</a> `
 51ec9f40
}
 f46e4d96
ngOnInit() { this.update1(); this.update2();
 51ec9f40
this.randomRouterLink()
 db3e80f5
/*
 ff48999f
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) */
 f46e4d96
}
 db3e80f5
ngOnDestroy() { clearInterval(this.interval); }
 c2530961
}