Basit Nizami Basit Nizami - 1 month ago 29
TypeScript Question

Access Typescript variable value in javascript inside Angular 2 Component

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?

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.

Answer

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

        });
    }
Comments