Converting the TextAreaEditor into an angular component

Posted by: johngiblin on 19 May 2020, 7:51 am EST

  • Posted 19 May 2020, 7:51 am 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();
    }
    }
    }
    }

  • Replied 20 May 2020, 6:19 pm EST

    Hi John,

    Sorry for the delay, DVJS do not support using Angular compoents as custom editors. You would have to use the normal classes for custom editors. Please let me know if you would like me to create an enhancement request on your behalf for this feature?

    Regards
    Sharad
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels