Ngx-dynamic-compiler NPM

NgxDynamicCompiler

Dyanmic Template Compiler --with AOT SUPPORT Maintained by PRAKASH THOMAS VARGHESE. Angular 7+

Supports Angular Directives ( like *ngFor ) and Data Bindings ( for ex. String Interpolation {{Data.Name}} ) as well.

The purpose of creating this repository was to provide for a way to compile component dynamically on the fly.

Online Demo

Stackblitz - Online Demo

Getting Started

Install the package :

npm i ngx-dynamic-compiler --save

Import the module :

import { NgxDCModule } from 'ngx-dynamic-compiler';

Add NgxDCModule to your root module Imports.

imports: [ BrowserModule, FormsModule,NgxDCModule ]

Usage

In Your Component HTML add the selector

## app.component.html

<ngx-dc  [Data]="bindData"  [Template]="template"  ></ngx-dc>

In Your Component TS

## app.component.ts

  

import {Component, OnInit} from '@angular/core';


@Component({
		    selector: 'app-root',
		    templateUrl: './app.component.html',
		    styleUrls: ['./app.component.scss']
})

  

export class AppComponent implements OnInit {

    template = `<h1> String Interpolation Result - {{Data.Result}}</h1>
    
			    <ol>
				    <li  *ngFor="let r of Data.ArraySample"  >{{r}}</li>
			    </ol>`;
  
    bindData = {
			     Result:'Hola !, Coffee ?',
			    ArraySample: ['Tea', 'Green Tea'] 
			    };
    
      
    
    constructor() { }
   
    ngOnInit() {}

  

}

Input Bindings

Data : Provide your json data to be binded with the template,

Template : You can use your angular template with all the directives like *ngFor ,*ngIf and perform data binding operations as well.Output events are not provided, but shall be included in future versions,