two method make it in one single method - angular

Question

As I have two methods I want to make it one single method.

For example

I have two color palates one is for background color change and another one is for shape color.

What I am thinking is instead of background color I want the shape color to be address for both backgrounds & for shape.

here is my TS code

setCanvasFill(): void {
    if (!this.props.canvasImage) {
        this.canvas.backgroundColor = this.props.canvasFill;
        this.canvas.renderAll();
    }
}

setFillColor(swatch: any): void {
    this.palettes.selected = swatch;
    this.props.fill = swatch.key;
    this.setFill();
}

Here is my HTML for background-color

    <div class="custom-item" *ngIf="!props.canvasImage">
  <div class="custom-item-title">Background color</div>
  <div class="custom-item-body">
    <input type="text" class="form-control" [cpPosition]="'left'" [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)="setCanvasFill()"/>
  </div>
</div>

Here is my html for Shapes color

    <div class="panel panel-default panel-palettes no-select">
  <div class="panel-heading">Color palette</div>
  <div class="panel-body max-height">
    <ul class="list-inline">
      <li class="color-swatch" *ngFor="let p of palettes.defaults" title="{{p.value}}" (click)="setFillColor(p)"
          [ngStyle]="{'background-color': p.key}" [ngClass]="{'selected': palettes.selected === p}">
        &nbsp;</li>
    </ul>
    <ul class="color-swatch-custom list-inline">
      <li class="color-swatch" *ngFor="let p of palettes.custom" title="{{p.value}}" (click)="setFillColor(p)"
          [ngStyle]="{'background-color': p.key}" [ngClass]="{'selected': palettes.selected === p}">&nbsp;</li>
    </ul>
  </div>
  <div class="panel-footer">
    <div class="btn-group btn-group-sm pull-right" role="group" aria-label="
    Color palette actions"
         [ngClass]="{'btn-group-disabled': palettes.selected === null}">
      <button ngbTooltip="Clear color" title="Clear color" type="button"
              class="btn btn-default" [disabled]="palettes.selected === null || palettes.selected.type !== undefined"
              (click)="removeSelectedColorSwatch();"><i
          class="fa fa-trash text-danger"
          aria-hidden="true"></i>
      </button>
    </div>
    <div class="clearfix"></div>
  </div>
</div>
<!-- /Panel: Color Palettes -->

I am trying like this

    setFillColor(swatch: any): void {
    this.palettes.selected = swatch;
    this.props.fill = swatch.key;
    this.setFill();
    this.setCanvasFill();
    
}

setCanvasFill(): void {
    if (!this.props.canvasImage) {
        console.log('say hi')
        this.canvas.backgroundColor = this.props.canvasFill;
        this.canvas.renderAll(); 
    }
}

I was getting the log but the color is not applying

Answer 1

Is this what you want?

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(); 
    };
}