ngx-gethtml

You can use raw html, javascript, stylesheet in Angular 2+ HTML template with this library.

English | 日本語

• Installation
• QuickStart
• Doc
• License

Installation

npm i ngx-gethtml --save

QuickStart

1. Import the NgxGetHTMLModule:

Import NgxGetHTMLModule into AppModule in your Angular project.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxGetHTMLModule } from 'ngx-gethtml';
 
@NgModule({
    imports: [
        BrowserModule,
        NgxGetHTMLModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

SharedModule

If you use a SharedModule that you import in multiple other feature modules, you can export the NgxGetHTMLModule to make sure you don't have to import it in every module.

@NgModule({
    exports: [
        CommonModule,
        NgxGetHTMLModule
    ]
})
export class SharedModule { }

2. Use <ngx-gethtml> & <ngx-script> in HTML template:

We provide two componets <ngx-gethtml> & <ngx-script> to help you add raw HTML and JavaScript in HTML. You can add mutiple <ngx-gethtml> & <ngx-script> tags in a HTML file, but <ngx-script> must be used in <ngx-gethtml>.

Example:

<h1>Demo</h1>
<div>
    <ngx-gethtml>
        <!-- load jQuery -->
        <ngx-script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></ngx-script>
        <div id="loadResult"></div>
        <ngx-script>
            // use jQuery to log load result.
            $('#loadResult').html('jQuery loaded successfully.');
            // define a function under window object to use it anywhere
            // do not forget to use the escape {{"{"}}
            window.test = function() {{"{"}}
                alert('alert message.');
            };
        </ngx-script>
        <!-- call function -->
        <button onclick="test()">Click</button>
    </ngx-gethtml>
</div>

Doc

Just a container of <ngx-script> and other HTML source. All the <ngx-script> in it will be executed follow the order from top to bottom.
Important! If you have more than one <ngx-gethtml> tags in a HTML file, they will be executed asynchronously.

<ngx-gethtml>
    <h3>Title</h3>
    <p>Some text.</p>
</ngx-gethtml>

You can add stylesheet import and <style> in it directly.

<ngx-gethtml>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
    p {
        background-color: yellowgreen;
    }
    </style> 
<ngx-gethtml>

1. Import JavaScript libiary by using src attribute as the same of <script>. You do not need to add type="text/javascript" or any other attributes to it.

<ngx-gethtml>
    <ngx-script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></ngx-script>
<ngx-gethtml>

1. Write JavaScript code inside of <ngx-script> directly.

<ngx-gethtml>
    <ngx-script>
        alert('Hello, world!');
    </ngx-script>
<ngx-gethtml>

1. Escape

Because "{" is an Angular template syntax, so you must escape it to {{"{"}}.
Important! Do not escape "}" in you code.

<ngx-gethtml>
    <ngx-script>
        function test() {{"{"}}
            // some code.
        }
    </ngx-script>
<ngx-gethtml>

1. The scope of JavaScript variable, function For security reasons, the variable and function inside of <ngx-script> can only use in the scope betweent <ngx-script> and </ngx-script>.
   If you want to use the variable and function in other <ngx-script> or in HTML as a event handler, you must define it and attach it to window object.

<ngx-gethtml>
    <ngx-script>
        window.test = function() {{"{"}}
            alert('alert message.');
        };
        window.msg = 'some message.'
    </ngx-script>
    <ngx-script>
        alert(msg);
    </ngx-script>
    <!-- call function -->
    <button onclick="test()">Click</button>
<ngx-gethtml>

License

Apache License Version 2.0