diff --git a/src/app/api.service.spec.ts b/src/app/api.service.spec.ts
new file mode 100644
index 0000000..c0310ae
--- /dev/null
+++ b/src/app/api.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ApiService } from './api.service';
+
+describe('ApiService', () => {
+  let service: ApiService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ApiService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/api.service.ts b/src/app/api.service.ts
new file mode 100644
index 0000000..d5e35ab
--- /dev/null
+++ b/src/app/api.service.ts
@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+//Use Angular's HttpClient to manage your HTTP requests.
+
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root'
+})
+//ng generate service api
+export class ApiService {
+  private apiUrl = 'https://jsonplaceholder.typicode.com/posts'; // Sample public API
+
+  constructor(private http: HttpClient) { }
+   // Method to POST JSON data
+   postData(data: any): Observable<any> {
+    return this.http.post(this.apiUrl, data);
+  }
+}
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 7f30a62..7974540 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -8,6 +8,7 @@ import { FluidParentComponent } from './fluid-parent/fluid-parent.component';
 import { AppRoutingModule } from './app-routing.module';
 import { LibraryComponentsComponent } from './library-components/library-components.component';
 import { TestPagesComponent } from './test-pages/test-pages.component';
+import { HttpClientModule } from '@angular/common/http';
 
 @NgModule({
   declarations: [
@@ -19,7 +20,8 @@ import { TestPagesComponent } from './test-pages/test-pages.component';
   ],
   imports: [
     BrowserModule,
-    AppRoutingModule
+    AppRoutingModule,
+    HttpClientModule
   ],
   providers: [DatePipe],
   bootstrap: [AppComponent],
diff --git a/src/app/fluid-parent/fluid-parent.component.ts b/src/app/fluid-parent/fluid-parent.component.ts
index e77e572..e63f731 100644
--- a/src/app/fluid-parent/fluid-parent.component.ts
+++ b/src/app/fluid-parent/fluid-parent.component.ts
@@ -120,6 +120,7 @@ import {
   querySelectorAllDeep,
   querySelectorDeep,
 } from 'query-selector-shadow-dom';
+import { ApiService } from './../api.service';
 
 @Component({
   selector: 'app-fluid-parent',
@@ -213,8 +214,9 @@ _updateDebounceTime: number = 500; // Amount of time required to pass WITHOUT "f
     },
   };
   templateValueKey: string;
+  response: any;
 
-  constructor(public datepipe: DatePipe) {}
+  constructor(public datepipe: DatePipe,private apiService: ApiService) {}
   ngOnInit(): void {
     console.log('on inittt');
     this.loadFormsBindData('calling from onInit');
@@ -497,6 +499,14 @@ _updateDebounceTime: number = 500; // Amount of time required to pass WITHOUT "f
 
       this.finalPolicyData.next(rawredactedValue);
       console.log(events.detail.data);
+      //instead of api call in React, api call in angular
+      this.apiService.postData(rawredactedValue).subscribe({
+        next: (res) => {
+          console.log('Response:', res);
+          this.response = res;
+        },
+        error: (err) => console.error('Error:', err)
+      });
     });
   }
 }