[//]: #@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://www.npmjs.com/package/p3x-angular-compile/)
---
# Angular Dynamic Compile service and directive
## Issues / Support
This is an open source project. Time is a precious thing, so I have rarely time to give support and fix issues for someone else. I fix a bug, when I have an error that I need. If you got an issue, error or bug, I hope someone will have time to do it for you, otherwise, you are on your own.
Though, if I know the solution, I will tell you. Besides, core errors will be fixed by me.
***If you want to extend, fix bugs or add in new features, I promptly merge pull requests or you can become a ```patrikx3``` member.***
### Node Version Requirement
```
>=7.8.0
```
### Built on Node
```
v7.10.0
```
The ```async``` and ```await``` keywords are required.
Install NodeJs:
https://nodejs.org/en/download/package-manager/
# 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.Build-Commit```).
## 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.332-30
[Corifeus](http://www.corifeus.tk) by [Patrik Laszlo](http://patrikx3.tk)
[//]: #@corifeus-footer:end