Posted 19 May 2020, 4:51 pm EST
I tried convertting the text area editor to an angular component but I kept getting the following message
Can’t resolve all parameters for TextAreaEditorComponent
Basically, it doesnt know how to handle the consctructor.
Thanks in adance!
import { Component, OnInit, ElementRef, ViewChild, Input, Optional } from '@angular/core';
@Component({
styleUrls: ['./text-area-editor.component.scss'],
templateUrl: './text-area-editor.component.html'
})
export class TextAreaEditorComponent implements OnInit {
@Input() options: any;
// options: any;
textArea: any;
containerKeyDownHandler: any;
containerClickHandler: any;
maxLength = 500;
@ViewChild('container', { static: true }) input: ElementRef;
constructor(
@Optional() public options: any
) {
this.options = options;
}
ngOnInit() {
}
init(): void {
const options = this.options;
const container = options.container;
this.maxLength = this.options.col.editor.maxLength;
this.textArea = container.children[0];
this.textArea.value = options.value;
this.textArea.focus();
this.handleClick = this.handleClick.bind(this);
this.handleKeyDown = this.handleKeyDown.bind(this);
container.addEventListener('click', this.handleClick);
container.addEventListener('keydown', this.handleKeyDown);
}
destroy() {
const container = this.options.container;
container.removeEventListener('click', this.handleClick);
container.removeEventListener('keydown', this.handleKeyDown);
}
focus() {
this.textArea.focus();
}
serialize() {
return this.textArea.value;
}
handleClick(event) {
event.stopPropagation();
if (event.target && event.target.tagName.toLowerCase() === 'button') {
if (event.target.className === 'save') {
this.options.dataview.stopEditing();
} else if (event.target.className === 'cancel') {
this.options.dataview.cancelEditing();
}
}
}
handleKeyDown(event) {
if (event.defaultPrevented || !document.activeElement) {
return;
}
if (event.srcElement.value.length > this.maxLength) {
event.srcElement.value = event.srcElement.value.substring(0, this.maxLength);
}
const key = event.key || event.keyCode;
if (key === 'Enter' || key === 13) {
if (document.activeElement.className === 'save') {
event.stopPropagation();
this.options.dataview.stopEditing();
} else if (document.activeElement.className === 'cancel') {
event.stopPropagation();
this.options.dataview.cancelEditing();
}
}
}
}
