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.


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';

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.

.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;

<usecsv-button importerKey="your-importer-key">
<button class="custom-button" customUsecsvButton>Import Data</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.