AngularHtmlRecompile

This library was generated with Angular CLI version 11.1.2.

How to use

1. Install library using npm i angular-html-recompile

2. Add below code in app.component.html file <pk-angular-html-recompile *ngIf="template !== ''" [stringTemplate]="template" [data]="dataObject">

3. 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 = `

Sign up

<input type="text" id="fName" class="form-control" [value]="fName" (keydown)="onControlEvent($event)" placeholder="First name">

<input type="text" id="lName" class="form-control" [value]="lName" (keydown)="onControlEvent($event)" placeholder="Last name">

<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">
<select class="form-select" id="selectedValue" (change)="onControlEvent($event)" aria-label="Default select example"> Open this select menu <option [value]="role" *ngFor="let role of Roles">{{role}} <input type="checkbox" id="check" [checked]="checkboxVal" (change)="onControlEvent($event)" />
<input type="color" id="colorKey" [value]="colorValue" (change)="onControlEvent($event)" />
<input type="date" id="datechange" class="form-control" [value]="dateValue" (change)="onControlEvent($event)">
<button class="btn btn-primary" id="submit" (click)="buttomClickEvent($event)">Sign in

`;

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.comp[cmpRef].instance['Password'] = "Karthik"; break; case submit: //Get reference of all parameters on submit click //1. respose.data OR //use this.comp[cmpRef].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: '[e-mail]', }, { 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; }

}

4. 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 { }

5. All boothstrap, material controls are supported

   npm i -s bootstrap