[//]: #@corifeus-header [](https://travis-ci.org/patrikx3/angular-compile) [](https://scrutinizer-ci.com/g/patrikx3/angular-compile/?branch=master) [](https://scrutinizer-ci.com/g/patrikx3/angular-compile/?branch=master) [](https://trello.com/b/gqKHzZGy/p3x) [](https://www.npmjs.com/package/p3x-angular-compile/) ------ # Angular Dynamic Compile service and directive ### Node Version Requirement ``` >=7.8.0 ``` The ```async``` and ```await``` keywords are required. # Description [//]: #@corifeus-header:end # Use case Dynamic compile components by a string template for Angular. You can provide a context, that you can use with anything (for clicking for free etc..) **The old ```angular-compile-html```.** ## NPM & Version It is a ```CommonJS``` bundle. The version reflects the Angular version (```AngularMajor.AngularMinor.P3xBuild-P3xCommit```). ## Install ```bash npm install --save p3x-angular-compile # or yarn add p3x-angular-compile ``` ## AOT + JIT It is not working out of the box (the default is either JIT or AOT, not both), but the apps become 10 folds faster. The ``@ngtools/webpack`` is AOT and the ```awesome-typescript-loader``` is JIT only. The solution can be architect with the ```@angular/compiler``` and the ```awesome-typescript-loader``` together. A miracle! Example here: [More info about AOT + JIT](https://pages.corifeus.tk/github/corifeus-builder-angular/artifacts/readme/skeleton.html) ### Size If you want very small bundle, use ```gzip```. ## Usage ### HTML ```html <div #container></div> <div [p3x-compile]="string" [p3x-compile-ctx]="youGetAContextToDoWithItAnything" [p3x-compile-imports]="importsLikeMaterialEtcArray"> </div> ``` ### Options The templates are cached. ```typescript export interface CompileOptions { template: string; container: ViewContainerRef; imports?: Array<Type<any> | ModuleWithProviders | any[]>; context?: any, onCompiled?: Function, onError?: Function; } ``` ### Example Check out the example, here [test/angular-webpack/angular/page.ts](https://github.com/patrikx3/angular-compile-html/blob/master/test/angular-webpack/angular/page.ts). ### Deployed example [Corifeus Pages (JIT + AOT at once)](https://pages.corifeus.tk) [https://github.com/patrikx3/corifeus-app-web-pages/blob/master/src/angular/modules/cory-page.ts](https://github.com/patrikx3/corifeus-app-web-pages/blob/master/src/angular/modules/cory-page.ts) ## Dev environment end test ```bash npm install -g yarn git clone https://github.com/patrikx3/angular-compile.git cd angular-compile yarn install grunt run|default ``` [http://localhost:8080](http://localhost:8080) [//]: #@corifeus-footer --- [**P3X-ANGULAR-COMPILE**](https://patrikx3.github.com/angular-compile) Build v4.1.245-604 on 5/6/2017, 5:38:16 PM by [Patrik Laszlo](http://patrikx3.tk) [//]: #@corifeus-footer:end