- angular-compile.git
- src
- app
- app.component.html
This file ( 3kB ) exceeds the allowed full mode (48 kb) size.
The editor full hight is disabled, only scrolling is allowed..
If you wish to edit a file, it is recommended to use the scroll mode as some users do not like the full height
mode, although some users like it.
<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 appearance="outlined" style="border-radius: 0; padding: 10px;">
<a mat-button mat-stroked-button color="primary" target="_blank" class="mat-headline-6" href="https://corifeus.com/angular-compile">Corifeus.com Wiki</a>
<a mat-button mat-stroked-button color="primary" target="_blank" href="https://github.com/patrikx3/angular-compile/blob/master/src/app/app.component.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/>
<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-flat-button color="accent" (click)="randomRouterLinkPure()">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>