Angular run only one of two functions-CodePudding

Is that possible to have two functions inside HTML element but to run only one of them according to a condition? for example:

<Button (click)="aFunction() ? anotherFucntion()">Hi</Button>

CodePudding user response：

i think you want someThing Like This

export class AppComponent {
      someFlag: boolean = false;
      firstFunction() {
        console.log('hi i am from first Function');
      }
      secondFunction() {
        console.log('hi i am from Second Function');
      }
    }

<button (click)="someFlag ? firstFunction() : secondFunction()">Hi</button>

but i would prefer if the code in the Component Like This

  doTheWork() {
    return this.someFlag ? this.firstFunction() : this.secondFunction();
  }

and then just call it in the html Like this

<button (click)="doTheWork()">Hi</button>

you can test the code here