[SOLVED] How to emit a click event with Angular 18 output api

How to emit a click event with Angular 18 output api

I have a button component that receives some inputs and when is clicked I want to emit the fact that it's been clicked using the new output api.

This is button.component.html

<button (click)="onClick()" [class]="getClasses()" [type]="getType()">
  @if (isLoading()) {
    <span aria-hidden="true" class="spinner-border spinner-border-sm" role="status"></span>
    {{ getLoadingText() }}
  } @else {
    {{ getText() }}
  }
</button>

this is button.component.ts

export class ButtonComponent {

  public action: OutputEmitterRef<void> = output();
  
  onClick(): void {
    this.action.emit();
  }
}

And this is how I'm using the button component inside another html template

<app-button (action)="login()" classes="btn btn-primary w-100" text="Login" type="button"/>

I would expect that login() function would be triggered once the button is clicked, however I have this error "Event action is not emitted by any applicable directives nor by element"

Since output api is a kinda new concept, I could not find many info about it, so I'd be grateful if anyone could help!

Solution

I found the problem, the syntax itself is correct, the problem was with the IDE, I had to update webstorm in order to recognise newer Angular features, such as new output api. After doing so, the error is gone and my code works just fine!