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:
4d54ba1b47c92334a81a0eb42382161bd02dc4a5
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
RSS
Git
Fetch origin
Download
ZIP
TAR
Clone
Clone
SSH
HTTPS
..
angular2
angular 2 compile html service
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 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 ``` ##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>loading ...</div> <div [p3xCompileHtml]="data" [p3xCompileHtmlRef]="ref">loading ...</div> `, }) @Injectable() export class Page implements OnInit { @ViewChild('container', {read: ViewContainerRef}) container: ViewContainerRef; data: string = ` <div>Done</div> <a href="javascript:void(0);" (click)="ref.alert('ok')"> If click works it says OK! </a>`; ref: Page; constructor( private compileHtmlService: CompileHtmlService ) { this.ref = this; } alert(string: string ) { alert(string); } ngOnInit() { this.compileHtmlService.compile({ template: this.data, container: this.container, ref: this, }) } } ``` ## Run ```bash npm install grunt run ``` [http://localhost:8080](http://localhost:8080)