Angular
Learn how to render your first form using the Joyfill JS SDK.
Prerequisites
To get the most out of this guide, you’ll need the following:
- Complete the Setup Guide
- A User Access Token (see setup guide)
- A Template Identifier (see setup guide)
Requirements
- Angular v17+
- Review SDK README
1. Install
npm install --save @joyfill/components
yarn add @joyfill/components
2. Usage
- Add the Template identifier from the previous setup step to the
app.component.ts
file. - Add the User Access Token from the preview setup step to the
joyfill.service.ts
file. - ❗️Important Note: ensure you use the full import path
import { JoyDoc } from '@joyfill/components/dist/joyfill.min.js'
. This will ensure proper angular support.
import { Component, OnInit, inject } from '@angular/core';
import { CommonModule } from '@angular/common';
import { JoyDoc } from '@joyfill/components/dist/joyfill.min.js';
import { JoyfillService } from './joyfill.service';
@Component({
selector: 'app-root',
standalone: true,
imports: [CommonModule],
template: `
<main>
<header>
<button (click)="handleSave()">Save</button>
</header>
<div id="joyfill-target"></div>
</main>
`,
styleUrl: './app.component.css'
})
export class AppComponent implements OnInit {
joyfillService: JoyfillService = inject(JoyfillService);
identifer = '<REPLACE WITH YOUR TEMPLATE IDENTIFIER>';
pendingTemplate = {};
ngOnInit() {
this.initJoyfill();
}
async initJoyfill() {
const template = await this.joyfillService.getTemplate(this.identifer);
JoyDoc(
document.getElementById('joyfill-target'),
{
doc: template,
onChange: (changelogs, data) => {
/**
* changelogs - the individual changes
* data - the entire new template with all changes applied
*/
console.log(changelogs, data)
this.pendingTemplate = data;
}
}
);
}
async handleSave() {
const updatedTemplate = await this.joyfillService.updateTemplate(this.identifer, this.pendingTemplate);
console.log('>>>>>>>>>>> updatedTemplate: ', updatedTemplate);
}
}
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class JoyfillService {
url = 'https://api-joy.joyfill.io/v1';
headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer <REPLACE WITH YOUR USER ACCESS TOKEN>'
}
constructor() { }
async getTemplate(identifier: string): Promise<object> {
const data = await fetch(`${this.url}/templates/${identifier}`, {
method: 'GET',
headers: this.headers
});
return await data.json();
}
async updateTemplate(identifier: string, data: object): Promise<object> {
const response = await fetch(`${this.url}/templates/${identifier}`, {
method: 'POST',
headers: this.headers,
body: JSON.stringify(data)
});
return await response.json();
}
}
Typescript
We have added the properties below to the "compilerOptions" in the tsconfig.json file in order to support the Joyfill JS SDK.
"allowJs": true,
"noImplicitAny": false
3. Try it yourself
If you’re looking for a full example project that shows many more of the Joyfill SDK capabilities and workflows then head over to our full example project and try it for yourself.
Updated 8 months ago