Toggle navigation
P3X GitList Snapshot
GitHub
Repo
Changelog
To do
Releases
Themes
default
cerulean
cosmo
flatly
journal
lumen
paper
readable
sandstone
simplex
spacelab
united
yeti
solar
cyborg
darkly
slate
superhero
Change log
Loading change log ...
To do ...
Loading todo ...
browsing:
b3659ae2940246f8fc6110fe6f37fd4646d20d96
Branches
dependabot/npm_and_yarn/multi-d54fdff7c2
dependabot/npm_and_yarn/nanoid-3.3.8
master
Tags
1.1.129-287
1.1.113-149
1.1.108-143
1.1.95-138
1.1.92-119
1.0.35-18
1.0.13-14
Files
Commits
Log
Graph
Stats
angular-compile.git
test
angular2Karma
RSS
Git
Fetch origin
Download
ZIP
TAR
Clone
Clone
SSH
HTTPS
..
test.ts
582B
p3x-ng2-compile-html patrik laszlo
8 years ago
README.md
# ng2-compile-html [![Build Status](https://travis-ci.org/patrikx3/ng2-compile-html.svg?branch=master)](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></div> <div [p3xCompileHtml]="data2" [p3xCompileHtmlRef]="ref"></div> ``` ###TypeScript ```typescript import { Component, Injectable, ViewChild, ViewContainerRef, OnInit } from '@angular/core'; import {CompileHtmlService } from '../../../src'; @Component({ selector: 'p3x-ng2-compile-html-test', 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)