I've created a reusable Angular 2 component for integrating the Summernote WYSIWYG editor into my application. This component takes in three input parameters - id, name, and body - which are then used as attributes for a rendered textarea. The issue I'm facing is that I'm initializing the Summernote plugin within the component and creating the editor. However, I want to avoid hard-coding the selector name and instead utilize the dynamic values passed as input parameters.
import {Component, ElementRef, OnInit, EventEmitter, Input, Output, Inject, ComponentRef} from '@angular/core';
import {Http} from '@angular/http';
declare var $: any;
@Component({
selector: 'editor',
template: '<textarea id="{{eid}}" name="{{ename}}" class="form-control">{{body}}</textarea>'
})
export class EditorComponent {
@Input() body: string;
@Input() eid: string;
@Input() ename: string;
@Output() onContentChanged: EventEmitter<any>;
constructor(){}
ngAfterViewInit()
{
$(document).on("pageLoaded", function (){
console.log("pageLoaded");
$("#body").summernote({
height: '200px',
callbacks: {
onChange: function(contents, $editable) {
$("#body").val(contents);
}
}
});
});
}
}
In the code snippet above, you can see that I have used $("#body") twice within the ngAfterViewInit block. I am looking to replace this with the eid variable. I tried using {{eid}}, but it generated an error in the browser console:
EXCEPTION: Syntax error, unrecognized expression: #{{eid}}Using this.eid is not valid since we're inside a JavaScript method rather than TypeScript.
This component is being used as a directive in another view file:
<editor [body]="page.body" eid="body" ename="body"></editor>The template block of the component correctly utilizes dynamic values. The challenge lies in making the initialization fully dynamic so that it can be utilized anywhere with different IDs.
Is there a solution or approach that I might be overlooking?
P.S. Everything works smoothly at the moment. I just need to enhance the initialization process to support full dynamism, allowing it to be used across various contexts with diverse IDs.