Impler's Angular SDK - Githubissues

Is your feature request related to a problem? Please describe. Create SDK for Angular to integrate Impler in Angular Application

Describe the solution you'd like The SDK would be headless, like calling a function. Headless SDK doesn't come into the way of the developer way and just does its work. The SDK would behave same as react implementation at, https://github.com/implerhq/impler.io/blob/next/packages/react/src/hooks/useImpler.ts

Additional context Here is the Pure HTML & JS Implementation of Logic in Angular SDK,

  <body>
    <button class="btn btn-primary" disabled id="btnOpenImpler">
      Import
    </button>

    <script
      type="text/javascript"
      src="https://embed.impler.io/embed.umd.min.js"
      async
    ></script>
    <script type="text/javascript">
      function generateUuid() {
        return window.crypto.getRandomValues(new Uint32Array(1))[0];
      }

      let uuid = generateUuid();
      let isImplerInitialized = false;
      const EleBtnOpenImpler = document.getElementById("btnOpenImpler");

      window.onload = (e) => {
        if (window.impler) {
          window.impler.init(uuid);

          const readyCheckInterval = setInterval(() => {
            if (window.impler.isReady()) {
              clearInterval(readyCheckInterval);
              EleBtnOpenImpler.removeAttribute("disabled");
            }
          }, 1000);

          EleBtnOpenImpler.addEventListener("click", (e) => {
            window.impler.show({
              uuid,
              projectId: "",
              templateId: "",
              accessToken: "",
              // Get these credentials from https://web.impler.io, (create import, add columns, got to "snippet", open "Add Import Button" to find credentials)
              // find out about more options here: https://docs.impler.io/widget/react-embed#props
            });
          });

          const closeWidget = () => {
            if (window.impler) {
              window.impler.close();
            }
          };

          window.impler.on('message', (eventData) => {
            switch (eventData.type) {
              case "WIDGET_READY":
                console.log("Widget is ready");
                break;
              case "CLOSE_WIDGET":
                console.log("Widget is closed");
                break;
              case "UPLOAD_STARTED":
                console.log("Upload started", eventData.value);
                break;
              case "UPLOAD_TERMINATED":
                console.log("Upload skipped in middle", eventData.value);
                break;
              case "UPLOAD_COMPLETED":
                console.log("Upload completed", eventData.value);
                break;
              case "DATA_IMPORTED":
                console.log("Data imported", eventData.value);
                break;
              default:
                break;
            }
          }, uuid);
        }
      };
    </script>
  </body>

Here we will allow the developer to provide following things,

  projectId,
  primaryColor,
  templateId,
  accessToken,
  authHeaderValue,
  title,
  extra,
  onUploadComplete,
  onWidgetClose,
  onUploadStart,
  onDataImported,
  onUploadTerminate,

Logic will export isImplerInitiated, showWidget, and closeWidget.

implerhq / impler.io

Impler's Angular SDK #722