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.
Additional metadata can be passed in the user
prop, and this will be passed back to your app in the JSON webhook when data is imported. It's a good idea to include a userId
or similar identifying data, so you can correctly identfiy and import the data into your app. Check more details about Options.
importerKey: string
Which can be found in the admin panel.user: json object
Contains details of the importing user, so that they can be identified easily.
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>

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>

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.