Passing object variable as @input to an angular custom element and bind a method for the @output event while adding the web element to summernote

Question

I have been using ngx-summernote as my rich text editor. Now, for my project purpose, i will need to insert out custom angular component dynamically to the rich text editor. After analysis, i found that the rich text editor supports dynamic html insertion but it can not recognize our custom angular component. For that purpose, i translated my custom angular component to angular custom element. After doing that, i was able to insert the component to the rich text editor.

However, i am facing issue in passing object and mapping output method to @input() and @Output() property of my custom component that i had translated to custom element.

Following is the code snippets for my use case:

The ngx-summernote configuration in html

<div
    [ngxSummernote]="summernoteOptions"
    [ngxSummernoteDisabled]="domain.screenIsViewOnly"
    [ngxSummernoteView]="specificInstructionRecord.specificInstruction"
    [(summernoteModel)]="specificInstructionRecord.specificInstruction"
></div>

The custom test angular component

import { Component, EventEmitter, Input, OnInit, Output } from "@angular/core";
import lodash from 'lodash';

@Component({
    selector: "spec-inst-test-component",
    templateUrl: "./specInstTestComponent.html"
})
export class SpecInstTestComponent implements OnInit {
    @Input() input: any;
    @Output() okClicked = new EventEmitter<any>();

    valueObject : {
        textVal: string,
        numberVal: number
    }

    textVal: string;
    numberVal: number;

    constructor() {
        
    }

    ngOnInit() {
        if(!lodash.isEmpty() && (typeof this.input) == "string") {
            this.input = JSON.parse(this.input);
        }
    }

    testButtonClicked() {
        this.valueObject = {
            textVal : this.textVal,
            numberVal: this.numberVal
        }
        this.okClicked.emit(this.valueObject);
    }
}

Template html for angular custom component

<div>
    <div *ngIf="input.type == 'input'">
        <label>{{input.label}}</label>
        <input type="text" [(ngModel)]="textVal"/>
    </div>
    <div *ngIf="input.type == 'number'">
        <label>{{input.label}}</label>
        <input type="number" [(ngModel)]="numberVal"/>
    </div>
    <button (click)="testButtonClicked()">OK</button>
</div>

The translation process of custom component to element

export class AppNgModule {

  constructor(private injector: Injector) {
      const specInstTestCustomElement = createCustomElement(SpecInstTestComponent, {injector: this.injector});
      if(!customElements.get("spec-inst-test-element")) {
          customElements.define("spec-inst-test-element", specInstTestCustomElement);
      }
  }
}

Usage of the custom element where i am dynamically inserting the element to the summernote rich text editor

addSpecInstTestEl() {
        this.inputObj = {
            type: "input",
            lable: "text field",
        }
        let html = `<spec-inst-test-element [input]="inputObj" (okClicked)="testSpecOkClicked($event)"></spec-inst-test-element>`
        this.specificInstructionRecord.specificInstruction = this.specificInstructionRecord.specificInstruction + html;
    }

Here the [input]="inputObj" binding is sending undefined tot the test component and also the (okClicked)="testSpecOkClicked($event)" output event is not firing the method specified.

Is that happening because i am inserting that to ngx-summernote or am i missing something? Can anyone help me on that?

Answer 1

in addSpecInstTestEl() Corrected property name from lable to label.