Mitosis does not convert optional callbacks in angular to use @Output and event emitter.

[cadamsdev]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• All
• Angular
• HTML
• Qwik
• React
• React-Native
• Solid
• Stencil
• Svelte
• Vue
• Web components

Reproduction case

https://mitosis.builder.io/?outputTab=IYOw5grgNsBOQ%3D%3D%3D&code=KYDwDg9gTgLgBAE2AMwIYFcA29noHYDGMAlhHnALICeAwhALaR7B4wAUYUEYAzgJRwA3gCg4cXIRJk4AC1R4EmYDUzECAawBC6GDDJsBIsWM7ceAOjIqIPYAH5zBgNxxRcAL7C3UYDHRRyNjcxAB4AIx09citVDQBeQQM4OIA%2BWXlFZVitSP0%2BdxSCbLh6YBCAegjdMhS3PidhTyA%3D%3D%3D

Expected Behaviour

mitosis

export default function MyComponent(props) {
  function handleClickButton() {
    props.onClose?.(); 
  }

  return (
    <button onClick={() => handleClickButton()}>click me</button>
  );
}

should be converted into this angular code

export class MyComponent {
  @Output() onClose = new EventEmitter();

  handleClickButton = function handleClickButton() {
    this.onClose.emit();
  };
}

Actual Behaviour

mitosis

export default function MyComponent(props) {
  function handleClickButton() {
    // do something here
    // angular output should convert this into this.onClose.emit();
    props.onClose?.(); 
  }

  return (
    <button onClick={() => handleClickButton()}>click me</button>
  );
}

angular

export class MyComponent {
  @Input() onClose: any;

  handleClickButton = function handleClickButton() {
    // do something here
    // angular output should convert this into this.onClose.emit();
    this.onClose?.();
  };
}

Additional Information

Angular output
see here

Stackblitz
see here

[kingzez]

export default function MyComponent(props) {
  function handleClickButton() {
    props.onClose?.();   //  change to `props.onClose()` works
  }

  return (
    <button onClick={() => handleClickButton()}>click me</button>
  );
}

[cadamsdev]

export default function MyComponent(props) {
  function handleClickButton() {
    props.onClose?.();   //  change to `props.onClose()` works
  }

  return (
    <button onClick={() => handleClickButton()}>click me</button>
  );
}

That does work, but what happens if the callback is optional? If I do this I'll have lint issues.

We'd have to do something like this (which works)

export default function MyComponent(props) {
  function handleClickButton() {
    if (props.onClose) {
      props.onClose(); 
    }
  }

  return (
    <button onClick={() => handleClickButton()}>click me</button>
  );
}

see fiddle

Though mitosis should also support this way as well.

export default function MyComponent(props) {
  function handleClickButton() {
      props.onClose?.(); 
  }

  return (
    <button onClick={() => handleClickButton()}>click me</button>
  );
}