Angular - Escaping variable in JSX and template literal to use it as parameter

Question

I am currently working in a JSX template, I declare a local data variable to the template and I try to pass it as a parameter to my component export in one of the Angular properties. The problem is that the JIT compiler flags me a parsing error, as if escaping the data this way in the template literal was not correct. Here is the code:

const data = [
  {
    fontIcon: 'settings',
    action: () => { return alert(1) }
  },
  {
    fontIcon: 'favorite',
    action: () => { return alert(2) }
  }
]

export const MenuExpansionPanel = {
  render: (args: Interface) => ({
    props: args,
    template: `
      <ui-kit-menu-expansion-panel
      title="Menu title"
      [disabled]="false"
      [expanded]="true"
      [hideToggle]="false"
      togglePosition="after"
      [draggable]="false"
      [icons]="${data}"
      >
        Content
      </ui-kit-menu-expansion-panel>
    `
  })
}

And the error:

If you have an idea how to solve it, please don't hesitate. Thank you!

Answer 1

Solution was:

export const MenuExpansionPanel = {
  render: (args: Interface) => ({
    props: {
      data: [
        {
          'fontIcon': 'settings',
          'action': () => {
            return alert('Settings icon clicked!')
          }
        },
        {
          'fontIcon': 'favorite',
          'action': () => {
            return alert('Favorite icon clicked!')
          }
        }
      ],
      ...args
    },
    template: `
              <ui-kit-menu-expansion-panel
              title="Menu title"
              [disabled]="false"
              [expanded]="true"
              [hideToggle]="false"
              togglePosition="after"
              [draggable]="false"
              [icons]="data"
              >
                Content
              </ui-kit-menu-expansion-panel>
            `
        })
    }