https://github.com/flatfilers/angular-adapter
Angular library to upload CSV files into your Angular applications effortlessly
https://github.com/flatfilers/angular-adapter
angular csv-import data-import excel-import
Last synced: 5 months ago
JSON representation
Angular library to upload CSV files into your Angular applications effortlessly
- Host: GitHub
- URL: https://github.com/flatfilers/angular-adapter
- Owner: FlatFilers
- Created: 2020-09-23T19:53:08.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-07-25T15:39:40.000Z (over 1 year ago)
- Last Synced: 2025-09-13T22:46:18.917Z (6 months ago)
- Topics: angular, csv-import, data-import, excel-import
- Language: TypeScript
- Homepage: https://flatfile.io/blog/how-to-create-an-angular-csv-importer-in-2-minutes/
- Size: 739 KB
- Stars: 1
- Watchers: 1
- Forks: 6
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Flatfile Angular Component - @flatfile/angular
[](https://www.npmjs.com/@flatfile/angular)
[](https://bundlephobia.com/result?p=@flatfile/angular)
[](https://www.npmjs.com/@flatfile/angular)
[](/LICENSE)
---
> NOTE: If you upgrading from previous versions (2.x), v3+ comes with some updates & breaking changes
#### BREAKING CHANGES:
Note that the latest version of `@flatfile/angular` 3+ uses the new `@flatfile/sdk` underneath which changes the API surface of interacting with the flatfile adapter entirely.
[Read more about these changes here](https://flatfile.com/docs/implementing-embeds/)
There is now only 1 required input, and that is `[token]` (which you must receive from your backend).
[Read more about generating a Token here](https://flatfile.com/docs/sdk/)
## Getting Started with Flatfile & Angular
We've made it really simple for you to get started with Flatfile with our new Flatfile Component. Here's what you'll need to know to get started.
First, install the dependency via npm:
`npm install @flatfile/angular`
This will give you access to the `` component as well as the same basic functionality as our Adapter.
---
#### Changelog
To view information about the latest releases and any minor/major changes, check out the [changelog here](./CHANGELOG.md).
---
---
## Getting Started with
```ts
import { FlatfileAdapterModule } from '@flatfile/angular';
// Add to your Modules imports: []
imports: [
FlatfileAdapterModule
]
```
#### Within a Components template use the flatfile-button:
The only thing **REQUIRED** for `` is the Input **`[token]`**, which you must retrieve from your backend.
**More information [here](https://flatfile.com/docs/implementing-embeds/)**
Now let's look at a simple example of getting everything up and running.
```ts
import {
// This interface is optional, but helpful to show you all the available required & optional inputs/outputs available to you
FlatfileMethods,
// The "Params" interfaces are useful to strongly type your output methods
CompleteParams,
ErrorParams,
} from "@flatfile/angular";
@Component({
template: `
Text you want to show for the button
`,
}) export class MyDemoComponent implements FlatfileMethods {
/**
* @NOTE - Call your backend & retrieve your Token, and pass down the license key
* 👇👇👇
*/
token = 'YOUR_TOKEN_HERE';
results;
onComplete(event: CompleteParams) {
console.log(`onComplete`);
console.log(event);
// Your data!
this.results = event.data;
}
onError(event: ErrorParams) {
console.log(`onError`);
console.log(event);
}
}
```
---
### More advanced use-case example (kitchen sink)
This is an example showcase all of the other additional (and optional) `@Output()` methods you could subscribe to.
We're also showcasing how you can **style** your flatfile-button as well!
Notice we're using all the Params interface (`InitParams` | `LaunchParams` etc to strongly type our Output method return values).
Within a Components template use the flatfile-button
```ts
import {
// This interface is optional, but helpful to show you all the available required & optional inputs/outputs available to you
FlatfileMethods,
// The "Params" interfaces are useful to strongly type your output methods
InitParams,
LaunchParams,
CompleteParams,
ErrorParams,
UploadParams,
} from "@flatfile/angular";
@Component({
template: `
Text you want to show for the button
`,
/**
* @note IMPORTANT if you want to style the child component
* from this "parent" component
*/
encapsulation: ViewEncapsulation.None,
/**
* @note We gave our a class,
* and if we access the "button" inside of that, we can style it however we want!
*/
styles: [`
.flatfile-button button {
border: 0;
border-radius: 3px;
padding: 1rem;
background: #794cff;
color: #fff;
}
`,
}) export class MyDemoComponent implements FlatfileMethods {
/**
* @NOTE - Call your backend & retrieve your Token, and pass down the license key
* 👇👇👇
*/
token = 'YOUR_TOKEN_HERE';
/** optional **/
mountUrl = '';
/** optional **/
apiUrl = '';
results;
/*
* @Output() methods, make sure they are passed down to
*/
onInit(event: InitParams) {
console.log(`onInit`);
console.log(event);
}
onUpload(event: UploadParams) {
console.log(`onUpload`);
console.log(event);
}
onLaunch(event: LaunchParams) {
console.log(`onLaunch`);
console.log(event);
}
onClose() {
console.log(`onClose`);
}
onComplete(event: CompleteParams) {
console.log(`onComplete`);
console.log(event);
this.results = event.data;
}
onError(event: ErrorParams) {
console.log(`onError`);
console.log(event);
}
}
```
#### Styling the component
As mentioned above, note that in order to style this child-component (from the parent), simply supply a `class=""` to the ``, and ensure that your parent component has `encapsulation` set to `ViewEncapsulation.None` (showcased above in this advanced demo).
Then you can style it with css via:
```css
.some_class_name button {
/* my styles */
background: #000;
border: 0;
color: #fff;
}
```
---
### Running the sample application
```bash
npm i && npm start
```
The same application will be fired up at `http://localhost:4200`.
> Ensure that you've entered in a valid `token` in the `AppComponent` file (`projects/sample/app.component.ts`).
---
### Publishing
Ensure that the correct semantic version has been updated in the `projects/angular-adapter/package.json` version.
Make sure that if you're updating the (base package) `@flatfile/adapter` version, to update it within the dependencies array of the `package.json` within the projects/angular-adapter/ library as well.
Then run:
```bash
npm run build:prod
npm run publish:pkg
```