component.html

<div style="display:flex;flex-direction:column;">
  <button [click-once]="testClick">Function as parameter</button>
  <!-- [undefined, undefined, undefined] -->
  
  <button [click-once]="testClick2('baba', 'dqdo')">Arrow function closure</button>
  <!-- ["baba", "dqdo", "4i4o"] -->
  
  <button [click-once]="testClick3('baba', 'dqdo')">Decorator</button>
  <!-- ["baba", "dqdo", undefined] -->
  
  <button [click-once]="testClick.bind(this, 'baba', 'dqdo')">Inline bind</button>
  <!-- ["baba", "dqdo", "4i4o"] -->
</div>

component.ts

@Component({
  selector: 'component',
  templateUrl: './component.html'
})
export class Component {
  prop1 = '4i4o';

  testClick(param1, param2) {
    console.log(this);
    return [param1, param2, this.prop1];
  }

  testClick2 = (param1, param2) => () => this.testClick(param1, param2);

  @Bind()
  testClick3(param1, param2) {
    console.log(this);
    return [param1, param2, this.prop1];
  }
}

//Decorator factory, returns decorator function
function Bind() {
  return function (target, propertyKey: string | symbol, descriptor: PropertyDescriptor) {
    //target is this.prototype
    let originalMethod = descriptor.value;
    descriptor.value = function (...args) {
      return () => originalMethod.call(target, ...args);
    }
  }
}