Rename function's name inside button angular 9

Question

On change select's function... Depending on the selected option, I want to rename the 'functionX' dynamically... Frontend

<select [(ngModel)]="selectedOp" (change)="selectedOption()">
   <option value={{op}} *ngFor="let op of Options">{{op}}</option>>
</select>

<button id="btnID" type="submit" (click)="functionX()">
 Button
</button>

Backend

I've been trying this using js...

Options = ['Function1', 'Function2'];

selectedOp;

selectedOption(){
    switch (this.selectedOp) {
      case 'Function1':
          const btn = document.getElementById('btnID');
          btn.setAttribute('(click)', 'function1()');
      break;
      case 'Function2':
          const btn = document.getElementById('btnID');
          btn.setAttribute('(click)', 'function2()');
      break
}

Then this error happens...

ERROR DOMException: Failed to execute 'setAttribute' on 'Element': '(click)' is not a valid attribute name..

If you guys know of a better way to do this, I'd appreciate your sharing :)

Answer 1

selectedOption(){
switch (this.selectedOp) {
  case 'Function1':
      this.funciton1();
  break;
  case 'Function2':
      this.function2();
  break
}