P3X GitList

f46e4d96

import { Component, Injectable, ViewChild, ViewContainerRef,

69db3407

OnInit, NgModule, CUSTOM_ELEMENTS_SCHEMA,

db3e80f5

OnDestroy

f46e4d96

} from '@angular/core';

6cee87e1

/*

83396ced

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';

6cee87e1

*/ import { MatButtonModule, } from '@angular/material';

83396ced

f46e4d96

@Component({ selector: 'p3x-compile-test',

db3e80f5

template: `

83396ced

<cory-mat-loading [cory-visible]="true"></cory-mat-loading> <div style="margin: 40px;"> <mat-card>

6cee87e1

<h2>Some helper URL links</h2>

83396ced

<a href="https://pages.corifeus.com/angular-compile" target="p3x-corifeus-pages">pages.corifeus.com</a> <br/>

884ed5c6

<a href="https://github.com/patrikx3/angular-compile/blob/master/test/angular-webpack/angular/page.ts#L54" target="p3x-corifeus-pages-github">How it works from the code in GitHub</a>

83396ced

<br/>

fae8634d

<a href="https://github.com/patrikx3/angular-compile/blob/master/test/angular-webpack/angular/page.ts#L115">How the actual Angular Compile looks like</a> <br/>

83396ced

<hr/>

fb0911e3

ff48999f

fb0911e3

ff48999f

fb0911e3

<hr/>

ff48999f

fb0911e3

ff48999f

fb0911e3

<hr/> Hidden is working? If show, below should say "Click me via a service!" <br/> <div *ngIf="false" [p3x-compile]="data2" [p3x-compile-ctx]="this"></div> <br/> If there was no "Click me via a service!" above, it works.

f46e4d96

fb0911e3

<hr/>

f46e4d96

fb0911e3

<h3>Data2 - This always visible</h3> <div *ngIf="true" [p3x-compile]="data2" [p3x-compile-ctx]="this"></div>

69db3407

f46e4d96

fb0911e3

<hr/>

51ec9f40

fae8634d

<h3>Pure Router Link with JIT Angular</h3>

fb0911e3

83396ced

<br/>

51ec9f40

83396ced

<button mat-button mat-raised-button color="primary" (click)="randomRouterLink()">Generate new router link</button>

51ec9f40

83396ced

<hr/>

51ec9f40

fae8634d

<h3>Router Link with p3x-angular-compile</h3> <div [p3x-compile]="dataMaterial" [p3x-compile-ctx]="this" [p3x-compile-module]="dataMaterialModule"></div>

83396ced

</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> `

fae8634d

dataMaterialModule : any = {

83396ced

// schemas: [CUSTOM_ELEMENTS_SCHEMA], // declarations: [], imports: [ MatButtonModule ], exports: [ ] }

fb0911e3

c605ea6f

constructor( // private compileHtmlService: CompileService ) {

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 = '';

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 = ` <a href="javascript:void(0)" routerLink="${randomString2}">${randomString2}</a> <br/> ${this.dataMaterialDefault} `

51ec9f40

}

f46e4d96

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

51ec9f40

this.randomRouterLink()

db3e80f5

/*

ff48999f

f46e4d96

}

db3e80f5

ngOnDestroy() { clearInterval(this.interval); }

f46e4d96

}