Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@flatfile/angular
Advanced tools
Readme
NOTE: If you upgrading from previous versions (2.x), v3+ comes with some updates & 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
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
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 <flatfile-button />
component as well as the same basic functionality as our Adapter.
To view information about the latest releases and any minor/major changes, check out the changelog here.
import { FlatfileAdapterModule } from '@flatfile/angular';
// Add to your Modules imports: []
imports: [
FlatfileAdapterModule
]
The only thing REQUIRED for <flatfile-button>
is the Input [token]
, which you must retrieve from your backend.
More information here
Now let's look at a simple example of getting everything up and running.
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: `
<flatfile-button
[token]="token"
(onComplete)="onComplete($event)"
(onError)="onError($event)"
class="flatfile-button"
>
Text you want to show for the button
</flatfile-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);
}
}
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
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: `
<flatfile-button
[token]="token"
[mountUrl]="mountUrl"
[apiUrl]="apiUrl"
(onInit)="onInit($event)"
(onLaunch)="onLaunch($event)"
(onComplete)="onComplete($event)"
(onUpload)="onUpload($event)"
(onError)="onError($event)"
(onClose)="onClose()"
class="flatfile-button"
>
Text you want to show for the button
</flatfile-button>
`,
/**
* @note IMPORTANT if you want to style the child component
* from this "parent" component
*/
encapsulation: ViewEncapsulation.None,
/**
* @note We gave our <flatfile-button class="flatfile-button"> 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 <flatfile-button>
*/
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);
}
}
As mentioned above, note that in order to style this child-component (from the parent), simply supply a class=""
to the <flatfile-button class="some_class_name">
, 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:
.some_class_name button {
/* my styles */
background: #000;
border: 0;
color: #fff;
}
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 theAppComponent
file (projects/sample/app.component.ts
).
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:
npm run build:prod
npm run publish:pkg
FAQs
Angular flatfile adapter
The npm package @flatfile/angular receives a total of 225 weekly downloads. As such, @flatfile/angular popularity was classified as not popular.
We found that @flatfile/angular demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 19 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.