Widget Eventbrite in Angular

Question

To do a checkout in eventbrite, in documentation use a Widget that extends window (https://www.eventbrite.com/platform/docs/embedded-checkout), but how to use vanilla code in angular?, I've done this:

1. Put <script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script> in index.html
2. Create component with button <button id="eventbrite-widget-trigger" type="button">Buy Tickets</button>
3. Create a .ts with widget configuration:

    const eventbriteCallback = function () {
      console.log("Order complete!");
    };
    
    window.EBWidgets.createWidget({
      widgetType: "checkout",
      eventId: "52766401728",//Here is event dinamically
      modal: true,
      modalTriggerElementId: "eventbrite-widget-trigger",
      onOrderComplete: eventbriteCallback,
    });

But how to merge vanilla code (point 3) with a component (point 2) and send the eventId dinamically? Or somebody has integrated checkout in eventbrite with angular?

Answer 1

You can use NgZone to achieve for example:

in AppComponent :

import { NgZone} from '@angular/core'; // import

in the constructor :

 constructor(private _ngZone: NgZone) {

 this._ngZone.runOutsideAngular(() => {

 window.EBWidgets // put your code that will be executed outside of angular

  });

 } 

Answer 2

Thanks Abderrahim Soubai-Elidrisi I solved my problem doing this:

add the script in the scripts array of the file angular.json

Followed the steps in this post: How to call JavaScript functions from Typescript in Angular 5?

1. Create the file in folder: src/assets/js/eventbrite/register.js, here put:

    function registerEvent(eventId, action) {
      const button = document.createElement("button");
      button.setAttribute("id", "example-widget-trigger");
      button.setAttribute("type", "button");
      document.body.appendChild(button);
      button.style.display = "none";
      setTimeout(() => {
        document.body.removeChild(button);
      }, 200);
    
      window.EBWidgets.createWidget({
        widgetType: "checkout",
        eventId: eventId,
        modal: true,
        modalTriggerElementId: "example-widget-trigger",
        onOrderComplete: action,
      });
    
      button.click();
    }

2. In angular.json search projects.architect.scripts and add src/assets/js/eventbrite/register.js to array scripts
3. To call the function, after imports: declare function registerEvent(eventId, action): void;
4. Call registerEvent(eventId, exampleCallback); Show steps 3 and 4