@codehint-ng/html-compiler
TypeScript icon, indicating that this package has built-in type declarations

1.0.8 • Public • Published

@codehint-ng/html-compiler

A simple component to display dynamic Angular components.

Usage

!!!NOTE For production version see note below.

  1. Register the @codehint-ng/html-compiler in your module:

     import { CngHtmlCompilerModule } from '@codehint-ng/html-compiler';
    
     @NgModule({
     imports: [
         CngHtmlCompilerModule
         ...
     ],
     ...
    
  2. Define dynamic component (angular syntax):

    this.template = '<div>hello {{name}}</div> <button (click)="onEvent()">Test Event</button>';
    this.componentClass = {
        name: 'World!',
        onEvent: () => { alert('this is event'); }
     };
    
  3. Use cng-html-compiler to display dynamic component:

    <cng-html-compiler [template]="template"
                       [componentClass]="componentClass">
    </cng-html-compiler>
    

!!!NOTE To work correctly application in production, do not forget to register JitCompilerModule in your main app.module.

import { JitCompilerModule } from '@codehint-ng/html-compiler';
        
 @NgModule({
     imports: [
         // workaround: The issue: Runtime compiler is not loaded.   
         JitCompilerModule // !once only, !in main app.module only
             ...
      ],
      ...
  })
  export class AppModule { }    

Addition

  1. If you want to place in template string some Angular component (your own or third party) you need to add origin module into property imports component cng-html-compiler

    this.template = '<my-or-third-party-component ...></my-or-third-party-component>';
    this.componentClass = {...};
    this.imports = [MyOrThirtPartyModule];
    ...
    

And pass this parameter into cng-html-compiler:

   <cng-html-compiler [template]="template"
                      [componentClass]="componentClass"
                      [imports]="imports">
   </cng-html-compiler>
  1. Html Compiler allows to get rendered html also:

    @ViewChild(CngHtmlCompilerComponent, {static: true}) htmlCompilerComponent: CngHtmlCompilerComponent;
    
    const sourceHtml = this.htmlCompilerComponent.getSourceHtml();
    

Readme

Keywords

Package Sidebar

Install

npm i @codehint-ng/html-compiler

Weekly Downloads

53

Version

1.0.8

License

MIT

Unpacked Size

154 kB

Total Files

26

Last publish

Collaborators

  • mazhekin