getting error as Cannot read property 'key' of undefined angular

Question

I am getting error for my below code

error

TypeError: Cannot read property 'key' of undefined at EditorComponent.push.xD4D.EditorComponent.setFillColor (editor.component.ts:634)

ts

    setFillColor(swatch: any): void {
    this.palettes.selected = swatch;
    this.props.fill = swatch.key;
    this.setFill();
    if (!this.props.canvasImage) {
        console.log('say hi')
        this.canvas.backgroundColor = this.props.canvasFill;
        this.canvas.renderAll(); 
    };
}

Here is my HTML code

        <input type="text" class="form-control" [cpPosition]="'right'" [cpPresetColors]="customColors" [cpOKButton]="true" [cpAddColorButtonText]="'Speichern'" [cpAddColorButton]="true" [cpOKButtonClass]="'btn btn-light btn-sm'" [cpSaveClickOutside]="false" [(colorPicker)]="props.canvasFill"
           [style.background]="props.canvasFill" [value]="props.canvasFill" (cpPresetColorsChange)="updateColorPresets($event)"
           (colorPickerChange)="setFillColor()"/> 

Answer 1

Check your input data like:

setFillColor(swatch: any): void {
  if (!swatch) {
    debugger
  }

And see call stack in dev tools.

By some of the case your function got "undefined" as argument. You should define reason why it happens and maybe write code to process this case.