Access Typescript variable value in javascript inside Angular 2 Component

Question

I have written a reusable component in Angular 2 to display the Summernote WYSIWYG editor in my application. That component accepts 3 input parameters which are being set as attributes for a rendered textarea as id, name and last one used as the body. My problem is that within this component I am initializing the Summernote plugin and creating the editor. Here, I do not want to hard code the selector name and want the dynamic values that the component received as the input parameters to the component. Relevant code is as follows.

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);
                        }
                    }
                });

        });
    }
}

Here, you can see that I have used $("#body") twice inside the ngAfterViewInit block. I want this to be replaced by the eid variable. I have tried {{eid}} but it doesn't work and throws the following error in browser console.

EXCEPTION: Syntax error, unrecognized expression: #{{eid}}

this.eid can't be used here either since we're inside the javascript method and not typescript.

I'm using this component in my other view file as a directive.

<editor [body]="page.body" eid="body" ename="body"></editor>

The template block in component is set properly with dynamic values. Only the javascript part is my issue.

Is there any other way I'm missing here?

PS So far it works great. I just want to make the initialization fully dynamic, so that I can use it anywhere with different IDs.

Answer 1

You can try using arrow functions instead of function to keep the same context.

  $(document).on("pageLoaded", () => {
            console.log("pageLoaded");

                $(this.eid).summernote({
                    height: '200px',
                    callbacks: {
                        onChange: (contents, $editable) => {
                            $(this.eid).val(contents);
                        }
                    }
                });

        });
    }