Custom input renderer loses value when edit button is clicked

[joaoa-casagrande]

I'm trying to add a column that has an input of type "color". At first I was able to get it to work, but when the Edit button is clicked, the color value is lost(defaults to black).
If in editing mode I change the color, the new color gets saved, but the old color is not shown at first.

2024-08-05.12-12-16.mp4

I hope this video helps with the understanding, I don't know how to explain better in writing.
Here's the code:

color-input.component.ts

import { Component, Input } from '@angular/core';
import { DefaultEditor } from 'ng2-smart-table';

@Component({
    template: `
    <input type="color" (click)="onClick.emit($event)" [value]="value" (input)="updateValue($event,$event.target.value)" />
  `,
})
export class CustomColorRenderComponent extends DefaultEditor {

    private _value:string = "";
    private _rowData:any = "";
    @Input()
    set value(val: string){
        console.log("this",this);
        console.log("value",val);
        this._value = val;
    }
    get value(){
        return this._value;
    }

    @Input()
    set rowData(val: any){
        console.log("this",this);
        console.log("rowData",val);
        this._rowData = val;
    }
    get rowData(){
        return this._rowData;
    }

    updateValue(event, newValue: string) {
        console.log(event)
        console.log(newValue)
        this.value = newValue;
        this.cell.newValue = newValue;
    }
}

fontes.component.html (what uses the custom color component and has the table)

        <ng2-smart-table [settings]="settings" [source]="source" (createConfirm)="onCreateConfirm($event)"  (deleteConfirm)="onDeleteConfirm($event)" (editConfirm)="onEditConfirm($event)">
        </ng2-smart-table>

fontes.component.ts (what uses the custom color component and has the table)

import {Component} from '@angular/core';
import {CustomColorRenderComponent} from '../../components/color-input.component';
import {LocalDataSource} from 'ng2-smart-table';
import {LoaderService} from '../../services/loader.service';


@Component({
    selector: 'app-fontes',
    templateUrl: './fontes.component.html',
    styleUrls: ['./fontes.component.scss'],
})
export class FontesComponent {

    data = [
        {
            id: 1,
            name: 'Mark Rogers',
            color: "#ee9638"
        }];

    settings = {
        add: {
            addButtonContent: '<i class="nb-plus"></i>',
            createButtonContent: '<i class="nb-checkmark"></i>',
            cancelButtonContent: '<i class="nb-close"></i>',

        },
        edit: {
            editButtonContent: '<i id="aaaa" class="nb-edit"></i>',
            saveButtonContent: '<i class="nb-checkmark"></i>',
            cancelButtonContent: '<i class="nb-close"></i>',
            confirmSave: true
        },
        delete: {
            deleteButtonContent: '<i class="nb-trash"></i>',
            confirmDelete: true,
        },
        columns: {
            id: {
                title: 'Id',
                type: 'number'
            },
            name: {
                title: 'Name',
                type: 'string',
            },
            color:
                {
                    title: "Cor",
                    type: "custom",
                    renderComponent: CustomColorRenderComponent,
                    editor: {
                        type: "custom",
                        component: CustomColorRenderComponent
                    },
                }
        },
    };
    source: LocalDataSource = new LocalDataSource();

    constructor(private loaderService: LoaderService
    ) {
        const data = this.getData();
        this.source.load(data);
    }

    onCreateConfirm(event): void {


    }

    onDeleteConfirm(event): void {

        console.log(event)
        if (window.confirm('Are you sure you want to delete?')) {
            console.log("Mandando requisição")
            this.loaderService.showLoader()
            setTimeout(() => {
                event.confirm.resolve();
                this.loaderService.hideLoader()
            }, 2000);


        } else {
            console.log("Faz nada")
            event.confirm.reject();
        }
    }

    onEditConfirm(event): void {
        console.log(event)
        if (window.confirm('Are you sure you want to edit?')) {
            console.log("Mandando requisição")
            setTimeout(() => {
                event.confirm.resolve();
            }, 1000);


        } else {
            console.log("Faz nada")
            event.confirm.reject();
        }
    }

    getData() {
        return this.data;
    }
}