Skip to main content

Getting Started

Let's integrate the UseCSV Importer plugin with your Angular app.

Make sure you configured your importer before starting.

Install

Using NPM

npm install @usecsv/angular

Using YARN

yarn add @usecsv/angular

Add the Importer

Adding the usecsv-button component to your frontend will render a button that triggers the import modal when clicked.

Code example with default button

Check codesandbox example.

Import UsecsvAngularPluginModule in your Angular Module: app.module.ts

import { UsecsvAngularPluginModule } from '@usecsv/angular';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, UsecsvAngularPluginModule],
  providers: [],
  bootstrap: [AppComponent],
})

Use usecsv-button in your template: app.component.html

<usecsv-button importerKey="your-importer-key">Import Data</usecsv-button>
Usage Exmaple

Code example with custom button

Check codesandbox example.

Add customUsecsvButton selector to your custom button.

<style>
  .custom-button {
    width: 170px;
    height: 70px;
    color: #fff;
    background-color: #027ad6;
    box-shadow: 0 32px 64px rgba(0,0,0,0.07);
    font: 700 24px sans-serif;
    text-align: center;
    border: none;
    border-radius: 3px;
  }
</style>

<usecsv-button importerKey="your-importer-key">
  <button class="custom-button" customUsecsvButton>Import Data</button>
</usecsv-button>
Usage example with custom button

Now your users can import data from within your app, the final step is to setup a webhook in your backend to receive imports. Let's goto the Webhook docs.