@impler/angular v0.27.0

Impler's goal is to help developers create an efficient and smooth data import experience between the product and its users. All with an easy-to-use API and outstanding developer experience.

✨ Features

• 🌈 Mapping Support between specified Schema and Fields in File
• 💅 Validation Support
• 🚀 Webhook support to send uploaded data
• 🛡 Simple and powerful Authentication
• 📦 Easy to set up and integrate
• 🛡 Written in TypeScript

📦 Install

npm install @impler/angular

yarn add @impler/angular

🔨 Usage

Add Script

You copy this snippet to your code in index.html file in head tag.

<script type="text/javascript" src="https://embed.impler.io/embed.umd.min.js" async></script>

Add Import Button

import { isPlatformBrowser } from '@angular/common';
import { Component, Inject, PLATFORM_ID } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { EventCalls, EventTypesEnum, ImplerService } from '@impler/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  title = 'import-component';

  constructor(
    private implerService: ImplerService,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {
    if (isPlatformBrowser(platformId)) {
      this.implerService.initializeImpler();
      this.implerService.subscribeToWidgetEvents((eventData: EventCalls) => {
        switch (eventData.type) {
          case EventTypesEnum.DATA_IMPORTED:
            console.log('Data Imported', eventData.value);
            break;
          default:
            console.log(eventData);
            break;
        }
      });
    }
  }
  public show(): void {
    this.implerService.showWidget({
      colorScheme: 'dark',
      projectId: '...',
      templateId: '...',
      accessToken: '...',
    });
  }
}

🔗 Links

• Home page
• Documentation