Angular: change color css variable with color picker input

I'm using the code in this answer to create an HTML5 color input control to change a css variable color.

The picker is

<input type="color"
               id="color-picker-link"
               (ngModelChange)="setColor($event)"
               [(ngModel)]="buttonColor">

And the TS is

  public buttonColor;

  ngOnInit() {
    let styles = getComputedStyle(document.documentElement);
    // set the color picker to match the value in the default css
    this.buttonColor = String(styles.getPropertyValue('--blue')).trim();
  }

  setColor(newColor) {
    document.documentElement.style.setProperty('--color-button-primary-background', newColor);
  }

But I want to have multiple color pickers, each changing a difference css variable. I don't want to create a function for each, but can't figure out how to pass which variable to change from the HTML. Any suggestions?

Edit

I might have solved it, not sure if this is the best way:

(ngModelChange)="setColor($event,'--color-button-primary-background')"

and then

  setColor(e, which) {
    document.documentElement.style.setProperty(which, e);
  }

I confess, I don't get the $event thing at all, as in why it returns the ngModel value.