Move Angular event handlers to methods

[kylecordes]

Currently

As with other output, the Angular output passes in-line event handling code through. For example, this input:

      <button
        onClick={(event) => (state.list = [...state.list, state.newItemName])}
      >

Produces this output:

      <button
        (click)="list = [...list, newItemName]"
      >
        Add list item
      </button>

This will not work in the general case (or in the specific case above), because Angular has its own notion of the syntax that works for an in-line event handler. Angular does not accept arbitrary TypeScript or JavaScript like a JSX/TSX-based framework.

Expected

To make Angular output work for nontrivial event handlers, it will probably be necessary to output the event handling code into a method in the component, and call that method from the generated event handler, roughly like so:

      <button
        (click)="handleClick()"
      >
        Add list item
      </button>

  handleClick() {
    this.list = [...this.list, this.newItemName]
  }

[PatrickJS]

This should be fine in angular is it not? Mitosis output cant 100% follow each framework patterns without a lot more work. Definitely possible though. This one isn't too hard to add though because we do this for web components

[kylecordes]

Ah, great point - yes, the answer will be to treat event handlers similarly to what is needed with web component output.

For background - the examples above does not work in Angular today. Here is the Angular doc page, it broadly describes the differences between Angular template expressions and general JS/TS syntax:

https://angular.io/guide/understanding-template-expr-overview

Here is someone hoping to use ... in an Angular template:

https://stackoverflow.com/questions/49301656/how-to-use-spread-operator-in-angular-component-template

Here is an issue in the Angular tracker about possible further expansion of the template syntax to make it closer to JS/TS.

https://github.com/angular/angular/issues/43485

[PatrickJS]

Wild, I remember when they create the issue about ... in the template lol yeah ill fix this