Angular-html-recompile NPM

AngularHtmlRecompile

This library was generated with Angular CLI version 11.1.2.

How to use

Install library using npm i angular-html-recompile
Add below code in app.component.html file <pk-angular-html-recompile *ngIf="template !== ''" stringTemplate="template" data="dataObject">
Use below code in app.component.ts file

import { Component, OnInit, ViewChild } from '@angular/core'; import { AngularHtmlRecompileComponent, AngularHtmlRecompileService } from 'angular-html-recompile'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: './app.component.scss' })

export class AppComponent implements OnInit {

@ViewChild(AngularHtmlRecompileComponent, { static: true }) comp !: AngularHtmlRecompileComponent;

constructor( private angularHtmlRecompileService: AngularHtmlRecompileService ) { }

public dataObject: any;

public template = `

<div class="card-header">
    <p class="h4 mb-4">Sign up</p>
</div>
<div class="card-body">
    <form class="text-center border border-light p-5">
        <div class="row mb-4">
            <div class="col">
                <input type="text" id="fName" class="form-control" [value]="fName" (keydown)="onControlEvent($event)" placeholder="First name">
            </div>
            <div class="col">
                <input type="text" id="lName" class="form-control" [value]="lName" (keydown)="onControlEvent($event)" placeholder="Last name">
            </div>
        </div>
        <input type="email" id="email" class="form-control mb-4" placeholder="E-mail" [value]="email" (keydown)="onControlEvent($event)">
        <input *ngIf="isShow" type="password" id="password" class="form-control" placeholder="Password" [value]="password" (keydown)="onControlEvent($event)"
            aria-describedby="defaultRegisterFormPasswordHelpBlock">
            <br />
        <select class="form-select" id="selectedValue" (change)="onControlEvent($event)" aria-label="Default select example">
            <option selected>Open this select menu</option>
            <option [value]="role" *ngFor="let role of Roles">{{role}}</option>
        </select>
        <input type="checkbox" id="check" [checked]="checkboxVal" (change)="onControlEvent($event)" />
        <br />
       <input type="color" id="colorKey" [value]="colorValue" (change)="onControlEvent($event)" />
       <br />
       <input type="date" id="datechange" class="form-control" [value]="dateValue" (change)="onControlEvent($event)">
        <br />
        <button class="btn btn-primary" id="submit" (click)="buttomClickEvent($event)">Sign in</button>
    </form>
</div>

ngOnInit(): void { this.angularHtmlRecompileService.sharedData.subscribe((respose: any) => { if(respose){ switch (respose.key) { case fName: // Call any method on change of name break; case lName: // Call any method on change of name break; case email: // Call any method on change of name break; case password: //Update password from main component this.compcmpRef.instance'Password' = "Karthik"; break; case submit: //Get reference of all parameters on submit click //1. respose.data OR //use this.compcmpRef.instance break; default: break; } } }); this.prepareData(); }

prepareData = () =>{

//Prepare data in following format only for easy binding //Template preparation and data preparation can be done once data received from service // AngularHtmlRecompileComponent will not be rendered until you pass data this.dataObject = [{ key: 'fName', value: 'Pranay' }, { key: 'lName', value: 'Kharsamble', }, { key: 'email', value: 'abc@test.com', }, { key: 'password', value: 'test123', }, { key: 'Roles', value: 'Admin', 'Author', 'Reader' }, { key: 'isShow', value: this.updateView() }, { key: 'checkboxVal', value: false }, { key: 'colorValue', value: '#fe413b' }, { key: 'dateValue', value: null }]; }

updateView = () => { //Write down logic before rendering to UI to work ngIf directive return true; }

}

Add module into app.module.ts file
```
import { NgModule } from '@angular/core';
```
import { BrowserModule } from '@angular/platform-browser'; import { MaterialModule } from './material-module'; import { AppComponent } from './app.component'; import { AngularHtmlRecompileModule } from "angular-html-recompile"; import { FormsModule } from '@angular/forms'; @NgModule({ declarations: AppComponent , imports: BrowserModule, FormsModule, MaterialModule, AngularHtmlRecompileModule , providers: [], bootstrap: AppComponent }) export class AppModule { }