I have written a reusable ponent in Angular 2 to display the Summernote WYSIWYG editor in my application. That ponent 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 ponent 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 ponent received as the input parameters to the ponent. 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 ponent in my other view file as a directive.

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

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

Is there any other way I'm missing here?

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

I have written a reusable ponent in Angular 2 to display the Summernote WYSIWYG editor in my application. That ponent 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 ponent 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 ponent received as the input parameters to the ponent. 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 ponent in my other view file as a directive.

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

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

Is there any other way I'm missing here?

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

• javascript
• angular
• typescript

• Have you tried the old method of binding the context into the function so that you can access this and all its variables? – Katana24 Commented Oct 13, 2016 at 14:36
• @Katana24 Can you please be more specific and provide an example please? – Basit Nizami Commented Oct 13, 2016 at 15:05
• Have a look at this article developer.mozilla/en/docs/Web/JavaScript/Reference/… - Also - why are using Jquery in there? – Katana24 Commented Oct 13, 2016 at 15:16
• your reference article is something pletely off the topic. I'm talking about Typescript vs Javascript scopes here. I'm using jQuery here because Angular 2 final version has just released and the plugin I'm using is not ported to Angular 2 yet. So, I have to live with it and use the jQuery version. – Basit Nizami Commented Oct 13, 2016 at 15:40

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

        });
    }