[ANGULAR] Buttons in eventTooltip

[ehc-between]

Hi

My objective is to add a button inside the eventTooltip that will run a function inside the ts file to set some parameters and navigate to a different page when clicked.

here is my configuration:

features : {
    // Event right click placement
    eventTooltip : {
      align : 'l-r',
      renderer : (data: any) =>
          `<dl>
          <dt>Time:</dt>
          <dd>
              ${DateHelper.format(data.eventRecord.startDate, 'LT')} - ${DateHelper.format(data.eventRecord.endDate, 'LT')}
          </dd>
          ${data.eventRecord.orderCompact ? `<dt>Customer:</dt><dd>${data.eventRecord.orderCompact.customer.name} (${data.eventRecord.orderCompact.customer.phone})</dd>` : ''}

      <dt>Address:</dt>
      ${data.eventRecord.address ? `<dd>${data.eventRecord.address.street} ${data.eventRecord.address.number}, ${data.eventRecord.address.postal_code} ${data.eventRecord.address.city}</dd>` : `<dd>No address added</dd>`}

      ${!data.eventRecord.orderCompact ? `<dt>Description:</dt>` : ''}
      ${!data.eventRecord.orderCompact && data.eventRecord.eventDescription != null ? `<dd>${data.eventRecord.eventDescription}</dd>` : ``}
      ${data.eventRecord.orderCompact ? `<dt>Status: </dt><dd>${data.eventRecord.orderCompact.order_status_name}</dd>` : ``}
      ${data.eventRecord.orderCompact ? `<button class="btn btn-primary btn-sm" (click)="onEventClick($event)">Go to order</button>` : ``}
    </dl>
    `,
  onBeforeShow(e: any) {
    const { source } = e;
    source.tools.delete = source.eventRecord.eventTypeId != 1;
    source.tools.edit = source.eventRecord.eventTypeId != 1;
  }
},

how can i add a (click)= on the button inside the tooltip ?
tried to add it as normal but it is not trigered when pressed.

[ehc-between]

also tried this version without any luck

    renderer : (data: any) => {
      if (data.eventRecord.orderCompact){
        return {
          style: 'display: flex; flex-direction: column; height: 60%',
          children: [
            {
              tag: 'h5',
              text: 'Time:'
            },
            {
              tag: 'span',
              text: DateHelper.format(data.eventRecord.startDate, 'LT') + " - " + DateHelper.format(data.eventRecord.endDate, 'LT')
            },
            {
              tag: 'h5',
              text: 'Customer:'
            },
            {
              tag: 'span',
              text: data.eventRecord.orderCompact.customer.name + " (" + data.eventRecord.orderCompact.customer.phone + ")"
            },
            {
              tag: 'h5',
              text: 'Address:'
            },
            {
              tag: 'span',
              text: data.eventRecord.address.street + " " + data.eventRecord.address.number + ", " + data.eventRecord.address.postal_code + " " + data.eventRecord.address.city
            },
            {
              tag: 'h5',
              text: 'Status:'
            },
            {
              tag: 'span',
              text: data.eventRecord.orderCompact.order_status_name
            },
            {
              tag: 'button',
              class: 'btn btn-primary btn-sm',
              text: data.eventRecord.orderCompact.order_status_name,
              click: (e: any) => {
                console.log("click", e)
                this.onEventClick(data)
              },
            }
          ]
        }
      }
      else {
        return
      }
    }

[Animal]

I'll see if I can come up with an incantation.

[Animal]

I'm sure you can take it from here: https://codepen.io/Animal-Nige/pen/poYaREm?editors=0010