<div style="margin-top: 8px; margin-bottom: 18px; max-width: 700px; margin-left: auto; margin-right: auto; padding-left: 10px; padding-right: 10px;">
<mat-toolbar color="primary">
P3X Angular Compile v{{ version }}
</mat-toolbar>
<mat-card style="border-radius: 0;">
<a mat-button color="accent" class="mat-title" href="https://corifeus.com/angular-compile">Corifeus.com Wiki</a>
<br/>
<a mat-button color="accent" 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>
<br/>
<strong>Go ahead and inspect the elements and click away!!!</strong>
<br/>
<br/>
<mat-divider></mat-divider>
<br/>
<div class="mat-h1">Template 1</div>
<div [p3x-compile]="data1" [p3x-compile-ctx]="this" [p3x-compile-module]="dataMaterialModule" class="p3x-angular-compile-element"></div>
<br/>
<mat-divider></mat-divider>
<br/>
<div class="mat-h1">Template 2</div>
<div [p3x-compile]="data2" [p3x-compile-ctx]="this" [p3x-compile-module]="dataMaterialModule" class="p3x-angular-compile-element"></div>
<br/>
<mat-divider></mat-divider>
<br/>
<div class="mat-h1">Template 3</div>
<div [p3x-compile]="data3" [p3x-compile-ctx]="this" [p3x-compile-module]="dataMaterialModule" class="p3x-angular-compile-element"></div>
<br/>
<mat-divider></mat-divider>
<br/>
<div class="mat-h1">Template 4 - Re-use the same context</div>
<div *ngIf="true" [p3x-compile]="data2" [p3x-compile-ctx]="this" [p3x-compile-module]="dataMaterialModule" class="p3x-angular-compile-element"></div>
<br/>
<br/>
<mat-divider></mat-divider>
<br/>
<div class="mat-h1">Pure Router Link with JIT Angular</div>
<button mat-button mat-raised-button color="primary" (click)="randomRouterLink()">Generate new router link</button>
<span [p3x-compile]="dataRouterLink" [p3x-compile-ctx]="this" [p3x-compile-module]="dataMaterialModule" class="p3x-angular-compile-element"></span>
<br/>
<br/>
<mat-divider></mat-divider>
<br/>
<div class="mat-h1">Router Link with p3x-angular-compile</div>
<div [p3x-compile]="dataMaterial" [p3x-compile-ctx]="this" [p3x-compile-module]="dataMaterialModule" class="p3x-angular-compile-element"></div>
</mat-card>
</div>
