Basit Nizami Basit Nizami - 1 year ago 149
TypeScript Question

Access Typescript variable value in javascript inside Angular 2 Component

I have written a reusable component in Angular 2 to display the

WYSIWYG editor in my application. That component accepts 3 input parameters which are being set as attributes for a rendered
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;

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


$(document).on("pageLoaded", function (){

height: '200px',
callbacks: {
onChange: function(contents, $editable) {


Here, you can see that I have used
twice inside the
block. I want this to be replaced by the
variable. I have tried
but it doesn't work and throws the following error in browser console.

EXCEPTION: Syntax error, unrecognized expression: #{{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>

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 Source

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

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

                    height: '200px',
                    callbacks: {
                        onChange: (contents, $editable) => {