SyncfusionExamples · SF2381 · Sep 16, 2026 · Sep 16, 2026
diff --git a/angular/individual-form-field-flatten/.editorconfig b/angular/individual-form-field-flatten/.editorconfig
@@ -0,0 +1,17 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+ij_typescript_use_double_quotes = false
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/angular/individual-form-field-flatten/.gitignore b/angular/individual-form-field-flatten/.gitignore
@@ -0,0 +1,44 @@
+# See https://docs.github.com/get-started/getting-started-with-git/ignoring-files for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+!.vscode/mcp.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+__screenshots__/
+
+# System files
+.DS_Store
+Thumbs.db
diff --git a/angular/individual-form-field-flatten/.prettierrc b/angular/individual-form-field-flatten/.prettierrc
@@ -0,0 +1,12 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "*.html",
+      "options": {
+        "parser": "angular"
+      }
+    }
+  ]
+}
diff --git a/angular/individual-form-field-flatten/README.md b/angular/individual-form-field-flatten/README.md
@@ -0,0 +1,96 @@
+# How to Flatten an Individual Form Field in the JavaScript PDF Library 
+
+This sample demonstrates how to flatten an individual form field using the `Syncfusion JavaScript PDF Library`.
+
+## Features Demonstrated
+
+This sample shows how to:
+
+- Load an existing PDF document from a URL.
+- Access the form fields of a loaded PDF document.
+- Locate a specific field of the form using its index.
+- Fill a text box field with sample text.
+- Flatten an individual form field to remove editability.
+- Save and download the generated PDF document.
+- Release resources after processing the PDF document.
+
+## Project Structure
+
+### app.ts
+
+The `flattenIndividualFormField()` method performs the following operations:
+
+- Downloads the input PDF document from the specified URL.
+- Loads the existing PDF document.
+- Accesses the form from the loaded PDF document.
+- Retrieves the individual form field to be flattened.
+- Fills the text box field with sample text.
+- Flattens the individual form field.
+- Saves the modified PDF as `Output.pdf`.
+- Releases resources by destroying the PDF document instance.
+
+The `getPdfAsUint8Array()` helper method:
+
+- Retrieves a PDF document from the specified URL.
+- Converts the file into a `Uint8Array`.
+- Returns the PDF data for further processing.
+
+### app.html
+
+The user interface includes:
+
+- A **Flatten Individual Form Field** button.
+- A simple layout to trigger the flatten operation.
+
+When the button is clicked, the application flattens an individual form field in the PDF document and downloads the generated output file.
+
+## Prerequisites
+
+Ensure the following software is installed:
+
+- Node.js
+- Angular CLI
+
+## Installation
+
+Install the Syncfusion JavaScript PDF Library package:
+
+```bash
+npm install @syncfusion/ej2-pdf
+```
+
+## Running the Application
+
+Install the project dependencies:
+
+```bash
+npm install
+```
+
+Start the Angular development server:
+
+```bash
+ng serve
+```
+
+Then open:
+
+```text
+http://localhost:4200/
+```
+
+Click **Flatten Individual Form Field** to load the form PDF, flatten the selected field, and download the output file.
+
+## Additional Resources
+
+### Documentation
+
+[JavaScript PDF Library Documentation](https://help.syncfusion.com/document-processing/pdf/pdf-library/javascript/working-with-forms)
+
+### Online Demos
+
+[JavaScript PDF Library Demos](https://document.syncfusion.com/demos/pdf/angular/#/tailwind3/pdf/)
+
+### Product Page
+
+[JavaScript PDF Library Product Page](https://www.syncfusion.com/document-sdk/javascript-pdf-library)
diff --git a/angular/individual-form-field-flatten/angular.json b/angular/individual-form-field-flatten/angular.json
@@ -0,0 +1,74 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "cli": {
+    "packageManager": "npm",
+    "analytics": "b11d304c-687a-4245-88b2-1afb5c1c7af5"
+  },
+  "newProjectRoot": "projects",
+  "projects": {
+    "individual-form-field-flatten": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:application",
+          "options": {
+            "browser": "src/main.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              {
+                "glob": "**/*",
+                "input": "public"
+              }
+            ],
+            "styles": [
+              "src/styles.css"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kB",
+                  "maximumError": "1MB"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "4kB",
+                  "maximumError": "8kB"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "optimization": false,
+              "extractLicenses": false,
+              "sourceMap": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular/build:dev-server",
+          "configurations": {
+            "production": {
+              "buildTarget": "individual-form-field-flatten:build:production"
+            },
+            "development": {
+              "buildTarget": "individual-form-field-flatten:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "test": {
+          "builder": "@angular/build:unit-test"
+        }
+      }
+    }
+  }
+}
diff --git a/angular/individual-form-field-flatten/package.json b/angular/individual-form-field-flatten/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "individual-form-field-flatten",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test"
+  },
+  "private": true,
+  "packageManager": "npm@11.19.0",
+  "dependencies": {
+    "@angular/common": "^22.1.0",
+    "@angular/compiler": "^22.1.0",
+    "@angular/core": "^22.1.0",
+    "@angular/forms": "^22.1.0",
+    "@angular/platform-browser": "^22.1.0",
+    "@angular/router": "^22.1.0",
+    "@syncfusion/ej2-pdf": "*",
+    "rxjs": "~7.8.0",
+    "tslib": "^2.3.0"
+  },
+  "devDependencies": {
+    "@angular/build": "^22.1.6",
+    "@angular/cli": "^22.1.6",
+    "@angular/compiler-cli": "^22.1.0",
+    "jsdom": "^28.0.0",
+    "prettier": "^3.8.1",
+    "typescript": "~6.0.2",
+    "vitest": "^4.0.8"
+  }
+}
diff --git a/angular/individual-form-field-flatten/public/favicon.ico b/angular/individual-form-field-flatten/public/favicon.ico
diff --git a/angular/individual-form-field-flatten/src/app/app.config.ts b/angular/individual-form-field-flatten/src/app/app.config.ts
@@ -0,0 +1,10 @@
+import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
+import { provideRouter } from '@angular/router';
+import { routes } from './app.routes';
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideBrowserGlobalErrorListeners(),
+    provideRouter(routes)
+  ]
+};
diff --git a/angular/individual-form-field-flatten/src/app/app.css b/angular/individual-form-field-flatten/src/app/app.css
diff --git a/angular/individual-form-field-flatten/src/app/app.html b/angular/individual-form-field-flatten/src/app/app.html
@@ -0,0 +1,44 @@
+<div style="
+    display:flex;
+    justify-content:center;
+    align-items:center;
+    min-height:100vh;
+    background:linear-gradient(135deg,#f8fafc,#eaf3ff);
+    font-family:'Segoe UI',sans-serif;
+">
+  <div style="
+      background:#fff;
+      padding:24px;
+      border-radius:20px;
+      box-shadow:0 10px 30px rgba(0,0,0,.08);
+      text-align:center;
+      width:400px;
+    ">
+    <h2 style="
+        color:#0f6cbd;
+        margin:0 0 16px 0;
+    ">
+      Flatten Individual Form Field
+    </h2>
+    <div style="
+        display:flex;
+        flex-direction:column;
+        gap:10px;
+    ">
+
+      <button (click)="flattenIndividualFormField()" style="
+          background:#0f6cbd;
+          color:#fff;
+          border:none;
+          padding:10px 16px;
+          border-radius:8px;
+          font-size:16px;
+          font-weight:600;
+          cursor:pointer;
+        ">
+        Flatten Individual Form Field
+      </button>
+
+    </div>
+  </div>
+</div>
diff --git a/angular/individual-form-field-flatten/src/app/app.routes.ts b/angular/individual-form-field-flatten/src/app/app.routes.ts
@@ -0,0 +1,3 @@
+import { Routes } from '@angular/router';
+
+export const routes: Routes = [];
diff --git a/angular/individual-form-field-flatten/src/app/app.spec.ts b/angular/individual-form-field-flatten/src/app/app.spec.ts
@@ -0,0 +1,24 @@
+import { TestBed } from '@angular/core/testing';
+import { App } from './app';
+
+describe('App', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [App],
+    })
+      .compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(App);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it('should render title', async () => {
+    const fixture = TestBed.createComponent(App);
+    await fixture.whenStable();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('h2')?.textContent).toContain('Flatten Individual Form Field');
+  });
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { Routes } from '@angular/router';

		export const routes: Routes = [];