Angular: Template literals inside render body break

Not a huge problem but FYI its difficult to work with template literals in mitosis (and more if you’re compiling to angular)

Code:

export default function Button(props: ButtonProps) {
  return <button class={`pa-button ${props.variant ? `pa-button--${props.variant}` : ''} `}>{props.children}</button>;
}

Result:

import { Component, Input } from "@angular/core";

@Component({
  selector: "button",
  template: `
    <button
      [class]="\`pa-button \${variant ? \`pa-button--\${variant}\` : ''} \`"
    >
      <ng-content></ng-content>
    </button>
  `,
})
export default class Button {
  @Input() variant: any;
  @Input() children: any;
}

The problem is that you’re transforming to strings, the bundler cannot understand the template literal inside (this is not happening in react or vue)

Fix (obvious fix… hah)

export default function Button(props: ButtonProps) {
  return <button class={'pa-button ' + props.variant ? 'pa-button--' + props.variant : ''}>{props.children}</button>;
}

Result:

import { Component, Input } from "@angular/core";

@Component({
  selector: "button",
  template: `
    <button [class]="'pa-button ' + variant ? 'pa-button--' + variant : ''">
      <ng-content></ng-content>
    </button>
  `,
})
export default class Button {
  @Input() variant: any;
  @Input() children: any;
}

[samijaber]

Yeah, will close this for now since having state in useState takes care of the issue, and is how we want users to handle their component state.

[CKGrafico]

Maybe we can close this? For me it’s ok.