Getting JavaScript properties Value

Flow
1

Hi ,

I am trying to integrate Code Mirror functionality in JavaScript and creating it as Custom Component. Everything is working great but I am facing challenge to capture the changed value.
In order to capture the changed value I created a property and calling it on change.

Please help me to resolve this issue (or) any other solution to get the changed value which then i can call as Property from Java.

Property

chng:{
	type:String
}

Ready Code

ready() 
{

	super.ready();
	this.editor = CodeMirror.fromTextArea(this.shadowRoot.getElementById('code'), {
		lineNumbers: true,
		mode: 'sql',
		readOnly: false
	}).on("change", e =>
	{
		this.chng = e.getValue();
	});

}

Later Iam capturing the changed Property value

public String getChng()
{
	return  getElement().getProperty("chng");
}

I am getting null value as return.

2

Hi ,

I made the below changes and i can see the value changes in console but not in vaadin.

editor = CodeMirror.fromTextArea(this.shadowRoot.getElementById('code'), {
		lineNumbers: true,
		mode: 'sql',
		readOnly: false
	});

	editor.on("change", e => 
	{
		this.chng = e.getValue();
		this.value=e.getValue();
		console.log(this.value);

	});

I am still getting null value for getProperty(“chng”);
Any hint or suggestion ?