Reply To: Angular component as cell editor

[YavorDashev]

Hi aconley,
Yes, that is correct that the template has to be a string and I will add a feature request item for this use case.
However I have create a little workaround so that you can have similar functionality:

cellEditComponenet () {
        const container = document.createElement('div');
        let component = this.service.loadComponent(YourCustomComponent, container);
        (component.componentRef.instance as YourCustomComponent).value = 123;
        container.id = "editorComponent"
        document.body.appendChild(container)
    }
	columns = [
		{ label: 'Sales person', dataField: 'Salesperson', icon: 'fa-user', showIcon: true ,
        editor: {
            template: '<div> </div>',
            settings: {value: null},
                onInit(row: number, column: string, editor: any) {
                    let customEditor = document.getElementById('editorComponent');
                    editor.firstElementChild.appendChild(customEditor)
                },
                onRender(row: number, column: string, editor: any) {
                    const container = document.createElement('div');
                    let customEditor = document.getElementById('editorComponent');
                    console.log(editor)
                    editor.firstElementChild.appendChild(customEditor)
                },
            }
        },
		{ label: 'City', dataField: 'City', showIcon: true, icon: 'fa-university' },
		{ label: 'Product', dataField: 'ProductName', icon: 'fa-product-hunt', showIcon: true },
		{ label: 'Payment Method', dataField: 'PaymentMethod', icon: 'fa-money', showIcon: true },
	];
    ngAfterViewInit():void {
        this.cellEditComponenet();
    }

Let me know what you think about this!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/