# ng2-compile-html
[](https://travis-ci.org/patrikx3/ng2-compile-html)
Angular 2 Service/Attribute to compile an HTML into a component
It is only using ```TypeScript``` right now. It can be built though.
##Install
```bash
npm install p3x-ng2-compile-html
```
##Test
```bash
git clone https://github.com/patrikx3/ng2-compile-html.git
cd ng2-compile-html
npm install
grunt run
```
[http://localhost:8080](http://localhost:8080)
##Usage
Check out the example, here [test/angular2/app/Page.ts](test/angular2/app/Page.ts).
###HTML
```html
<div #container>loading ...</div>
<div [p3xCompileHtml]="data" [p3xCompileHtmlRef]="ref">loading ...</div>
```
###TypeScript
```typescript
import {
Component,
Injectable,
ViewChild,
ViewContainerRef,
OnInit
} from '@angular/core';
import {CompileHtmlService } from '../../../src';
@Component({
selector: 'p3x-ng2-compile-html-text',
template: `
<div #container></div>
<hr/>
<div [p3xCompileHtml]="data2" [p3xCompileHtmlRef]="ref"></div>
`,
})
@Injectable()
export class Page implements OnInit {
@ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef;
data1: string;
data2: string;
ref: Page;
counter1 : number = 0;
counter2 : number = 0;
constructor( private compileHtmlService: CompileHtmlService ) {
this.ref = this;
}
private update1() {
this.counter1++;
this.data1 = `
<div>Service</div><a href="javascript:void(0);" (click)="ref.update1()">Click me via a service!</a>
<div>${this.counter1}</div>
`;
this.compileHtmlService.compile({
template: this.data1,
container: this.container,
ref: this,
})
}
private update2() {
this.counter2++;
this.data2 = `
<div>Attribute</div><a href="javascript:void(0);" (click)="ref.update2()">Click me via a service!</a>
<div>${this.counter2}</div>
`;
}
ngOnInit() {
this.update1();
this.update2();
}
}
```
by [Patrik Laszlo](http://patrikx3.tk)