@mindfiredigital/textigniter-angular 1.1.1 → 1.2.0

package/.turbo/turbo-build.log

@@ -0,0 +1,26 @@
+
+> @mindfiredigital/textigniter-angular@1.2.0 build /home/runner/work/TextIgniterJS/TextIgniterJS/packages/angular
+> ng build text-igniter
+
+Building Angular Package
+
+------------------------------------------------------------------------------
+Building entry point 'text-igniter'
+------------------------------------------------------------------------------
+- Compiling with Angular sources in Ivy partial compilation mode.
+✔ Compiling with Angular sources in Ivy partial compilation mode.
+✔ Generating FESM bundles
+- Copying assets
+✔ Copying assets
+- Writing package manifest
+✔ Writing package manifest
+✔ Built text-igniter
+
+------------------------------------------------------------------------------
+Built Angular Package
+ - from: /home/runner/work/TextIgniterJS/TextIgniterJS/packages/angular/projects/text-igniter
+ - to:   /home/runner/work/TextIgniterJS/TextIgniterJS/packages/angular/dist/text-igniter
+------------------------------------------------------------------------------
+
+Build at: 2026-02-25T11:00:57.492Z - Time: 2425ms
+

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @mindfiredigital/textigniter-angular
 
+## 1.1.2
+
+### Patch Changes
+
+- Merge pull request #186 from mindfiredigital/dev
+
 ## 1.1.1
 
 ### Patch Changes

package/README.md

@@ -1,42 +1,407 @@
-# Angular
+# @mindfiredigital/textigniter-angular
 
-This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 19.2.7.
+Angular wrapper component for TextIgniter - A powerful rich text editor for Angular applications.
 
-## Development server
+[![npm version](https://badge.fury.io/js/@mindfiredigital%2Ftextigniter-angular.svg)](https://www.npmjs.com/package/@mindfiredigital/textigniter-angular)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 
-To start a local development server, run:
+## 📦 Installation
 
 ```bash
-ng serve
+npm install @mindfiredigital/textigniter-angular
 ```
 
-Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.
+Or using yarn:
 
-## Code scaffolding
+```bash
+yarn add @mindfiredigital/textigniter-angular
+```
 
-Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
+Or using pnpm:
 
 ```bash
-ng generate component component-name
+pnpm add @mindfiredigital/textigniter-angular
 ```
 
-For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
+## 🚀 Quick Start
 
-```bash
-ng generate --help
+### 1. Import the Module
+
+```typescript
+// app.component.ts
+import { Component } from '@angular/core';
+import { RouterOutlet } from '@angular/router';
+import { TextIgniterModule } from '@mindfiredigital/textigniter-angular';
+
+@Component({
+  selector: 'app-root',
+  imports: [RouterOutlet, TextIgniterModule],
+  templateUrl: './app.component.html',
+  styleUrl: './app.component.css',
+})
+export class AppComponent {
+  title = 'demo-app';
+
+  config = {
+    showToolbar: true,
+    features: [
+      'bold',
+      'italic',
+      'underline',
+      'hyperlink',
+      'fontFamily',
+      'fontSize',
+      'alignLeft',
+      'alignCenter',
+      'alignRight',
+      'unorderedList',
+      'orderedList',
+      'image',
+      'fontColor',
+      'bgColor',
+      'getHtmlContent',
+      'loadHtmlContent',
+    ],
+  };
+}
+```
+
+### 2. Use in Template
+
+```html
+<!-- app.component.html -->
+<ngx-text-igniter [config]="config"></ngx-text-igniter>
+```
+
+## 🎯 Features
+
+- ✅ Rich text editing with toolbar
+- ✅ Bold, Italic, Underline, Strikethrough
+- ✅ Font family and size customization
+- ✅ Text and background color
+- ✅ Text alignment (left, center, right)
+- ✅ Lists (ordered and unordered)
+- ✅ Hyperlinks
+- ✅ Image insertion
+- ✅ Undo/Redo functionality
+- ✅ **Real-time content change events** 🆕
+- ✅ TypeScript support
+- ✅ Fully customizable
+
+## 📚 API Reference
+
+### Component Inputs
+
+#### `config` (Required)
+
+Configuration object for the editor.
+
+```typescript
+interface EditorConfig {
+  showToolbar: boolean;
+  features: string[];
+}
+```
+
+**Available Features:**
+
+- `'bold'` - Bold text
+- `'italic'` - Italic text
+- `'underline'` - Underline text
+- `'strikethrough'` - Strikethrough text
+- `'hyperlink'` - Add hyperlinks
+- `'fontFamily'` - Change font family
+- `'fontSize'` - Change font size
+- `'fontColor'` - Change text color
+- `'bgColor'` - Change background color
+- `'alignLeft'` - Align text left
+- `'alignCenter'` - Align text center
+- `'alignRight'` - Align text right
+- `'unorderedList'` - Create bullet lists
+- `'orderedList'` - Create numbered lists
+- `'image'` - Insert images
+- `'getHtmlContent'` - Get HTML content button
+- `'loadHtmlContent'` - Load HTML content button
+
+#### `editorId` (Optional)
+
+Custom ID for the editor element. Default: `'editor-ngId'`
+
+```typescript
+<ngx-text-igniter
+  [config]="config"
+  [editorId]="'my-custom-editor'">
+</ngx-text-igniter>
+```
+
+### Component Outputs
+
+#### `contentChange` 🆕
+
+Emits whenever the editor content changes, providing both HTML and plain text.
+
+```typescript
+interface ContentChangeEvent {
+  html: string; // HTML content
+  text: string; // Plain text content (without HTML tags)
+}
+```
+
+## 💡 Usage Examples
+
+### Basic Example
+
+```typescript
+// app.component.ts
+import { Component } from '@angular/core';
+import { TextIgniterModule } from '@mindfiredigital/textigniter-angular';
+
+@Component({
+  selector: 'app-root',
+  imports: [TextIgniterModule],
+  template: `<ngx-text-igniter [config]="config"></ngx-text-igniter>`,
+})
+export class AppComponent {
+  config = {
+    showToolbar: true,
+    features: ['bold', 'italic', 'underline'],
+  };
+}
+```
+
+### Real-time Content Updates 🆕
+
+Get notified whenever the content changes:
+
+```typescript
+// app.component.ts
+import { Component } from '@angular/core';
+import { TextIgniterModule } from '@mindfiredigital/textigniter-angular';
+
+@Component({
+  selector: 'app-root',
+  imports: [TextIgniterModule],
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+  htmlContent = '';
+  textContent = '';
+
+  config = {
+    showToolbar: true,
+    features: ['bold', 'italic', 'underline', 'fontColor', 'bgColor'],
+  };
+
+  onContentChange(data: { html: string; text: string }) {
+    console.log('Content changed:', data);
+    this.htmlContent = data.html;
+    this.textContent = data.text;
+  }
+
+  get characterCount(): number {
+    return this.textContent.length;
+  }
+
+  get wordCount(): number {
+    return this.textContent.trim()
+      ? this.textContent.trim().split(/\s+/).length
+      : 0;
+  }
+}
 ```
 
-## Building
+```html
+<!-- app.component.html -->
+<h1>TextIgniter Angular Example</h1>
+
+<ngx-text-igniter [config]="config" (contentChange)="onContentChange($event)">
+</ngx-text-igniter>
+
+<!-- Real-time Content Preview -->
+<div class="preview-container">
+  <h3>Real-time Content Preview:</h3>
+
+  <div class="content-section">
+    <strong>HTML Content:</strong>
+    <pre>{{ htmlContent || 'Start typing to see content...' }}</pre>
+  </div>
+
+  <div class="content-section">
+    <strong>Text Content:</strong>
+    <pre>{{ textContent || 'Start typing to see text...' }}</pre>
+  </div>
+
+  <div class="stats">
+    <strong>Stats:</strong>
+    <p>Characters: {{ characterCount }} | Words: {{ wordCount }}</p>
+  </div>
+</div>
+```
 
-To build the project run:
+### Auto-Save Functionality
+
+Implement auto-save with debouncing:
+
+```typescript
+import { Component, OnDestroy } from '@angular/core';
+import { Subject } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-editor',
+  template: `
+    <ngx-text-igniter
+      [config]="config"
+      (contentChange)="onContentChange($event)"
+    >
+    </ngx-text-igniter>
+    <p *ngIf="lastSaved">Last saved: {{ lastSaved | date: 'medium' }}</p>
+  `,
+})
+export class EditorComponent implements OnDestroy {
+  config = { showToolbar: true, features: ['bold', 'italic'] };
+  lastSaved: Date | null = null;
+
+  private contentChange$ = new Subject<{ html: string; text: string }>();
+
+  constructor() {
+    // Auto-save after 2 seconds of inactivity
+    this.contentChange$
+      .pipe(debounceTime(2000))
+      .subscribe(data => this.saveContent(data));
+  }
+
+  onContentChange(data: { html: string; text: string }) {
+    this.contentChange$.next(data);
+  }
+
+  saveContent(data: { html: string; text: string }) {
+    // Save to backend
+    console.log('Saving content...', data);
+    this.lastSaved = new Date();
+
+    // Example: Call your API
+    // this.http.post('/api/save', data).subscribe();
+  }
+
+  ngOnDestroy() {
+    this.contentChange$.complete();
+  }
+}
+```
+
+### Form Integration
+
+Use with Angular Reactive Forms:
+
+```typescript
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-form',
+  template: `
+    <form [formGroup]="form" (ngSubmit)="onSubmit()">
+      <ngx-text-igniter
+        [config]="config"
+        (contentChange)="onContentChange($event)"
+      >
+      </ngx-text-igniter>
+
+      <button type="submit" [disabled]="!form.valid">Submit</button>
+    </form>
+  `,
+})
+export class FormComponent {
+  form: FormGroup;
+
+  config = {
+    showToolbar: true,
+    features: ['bold', 'italic', 'underline'],
+  };
+
+  constructor(private fb: FormBuilder) {
+    this.form = this.fb.group({
+      content: ['', Validators.required],
+    });
+  }
+
+  onContentChange(data: { html: string; text: string }) {
+    this.form.patchValue({ content: data.html });
+  }
+
+  onSubmit() {
+    if (this.form.valid) {
+      console.log('Form data:', this.form.value);
+      // Submit to backend
+    }
+  }
+}
+```
+
+### Custom Editor ID
+
+Use a custom ID for multiple editors:
+
+```typescript
+@Component({
+  template: `
+    <ngx-text-igniter
+      [config]="config"
+      [editorId]="'editor-1'"
+      (contentChange)="onEditor1Change($event)"
+    >
+    </ngx-text-igniter>
+
+    <ngx-text-igniter
+      [config]="config"
+      [editorId]="'editor-2'"
+      (contentChange)="onEditor2Change($event)"
+    >
+    </ngx-text-igniter>
+  `,
+})
+export class MultiEditorComponent {
+  config = { showToolbar: true, features: ['bold', 'italic'] };
+
+  onEditor1Change(data: { html: string; text: string }) {
+    console.log('Editor 1:', data);
+  }
+
+  onEditor2Change(data: { html: string; text: string }) {
+    console.log('Editor 2:', data);
+  }
+}
+```
+
+## 🔧 Development
+
+### Building the Library
+
+To build the library, run:
 
 ```bash
-ng build
+ng build text-igniter
 ```
 
-This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.
+This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
 
-## Running unit tests
+### Publishing the Library
+
+Once the project is built, you can publish your library by following these steps:
+
+1. Navigate to the `dist` directory:
+
+   ```bash
+   cd dist/text-igniter
+   ```
+
+2. Run the `npm publish` command to publish your library to the npm registry:
+   ```bash
+   npm publish --access public
+   ```
+
+### Running Unit Tests
 
 To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
 
@@ -44,16 +409,51 @@ To execute unit tests with the [Karma](https://karma-runner.github.io) test runn
 ng test
 ```
 
-## Running end-to-end tests
+### Running the Demo App
 
-For end-to-end (e2e) testing, run:
+To run the demo application:
 
 ```bash
-ng e2e
+ng serve demo-app
 ```
 
-Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
+Navigate to `http://localhost:4200/` to see the editor in action.
+
+## 📋 Requirements
+
+- Angular >= 19.0.0
+- TypeScript >= 5.7.0
+- Node.js >= 12.0.0
+
+## 📝 License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
+
+## 🔗 Links
+
+- [NPM Package](https://www.npmjs.com/package/@mindfiredigital/textigniter-angular)
+- [GitHub Repository](https://github.com/mindfiredigital/textigniterjs)
+- [Documentation](https://github.com/mindfiredigital/textigniterjs/tree/main/docs)
+- [Core Package](https://www.npmjs.com/package/@mindfiredigital/textigniter)
+- [React Package](https://www.npmjs.com/package/@mindfiredigital/textigniter-react)
+- [Web Component](https://www.npmjs.com/package/@mindfiredigital/textigniter-web-component)
+
+## 📞 Support
+
+For issues, questions, or suggestions:
+
+- [GitHub Issues](https://github.com/mindfiredigital/textigniterjs/issues)
+- [Discussions](https://github.com/mindfiredigital/textigniterjs/discussions)
+
+## 🎉 What's New
+
+### v1.2.0
+
+- ✨ Added `contentChange` event emitter for real-time content updates
+- 🐛 Fixed clipboard permission error
+- 📚 Updated documentation and examples
+- 🔧 Improved TypeScript support
 
-## Additional Resources
+---
 
-For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
+Made with ❤️ by [Mindfire Digital](https://github.com/mindfiredigital)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindfiredigital/textigniter-angular",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "private": false,
   "publishConfig": {
     "access": "public"

package/projects/demo-app/src/app/app.component.html

@@ -1,2 +1,25 @@
+<h1>TextIgniter Angular Example</h1>
 
-<ngx-text-igniter [config]="config"></ngx-text-igniter>
+<ngx-text-igniter [config]="config" (contentChange)="onContentChange($event)"></ngx-text-igniter>
+
+<!-- Real-time Content Preview -->
+<div style="margin-top: 20px; padding: 20px; border: 1px solid #ccc; background: #f9f9f9;">
+    <h3>Real-time Content Preview:</h3>
+
+    <div style="margin-top: 10px;">
+        <strong>HTML Content:</strong>
+        <pre
+            style="background: white; padding: 10px; overflow: auto; max-height: 200px;">{{ htmlContent || 'Start typing to see content...' }}</pre>
+    </div>
+
+    <div style="margin-top: 10px;">
+        <strong>Text Content:</strong>
+        <pre
+            style="background: white; padding: 10px; overflow: auto; max-height: 100px;">{{ textContent || 'Start typing to see text...' }}</pre>
+    </div>
+
+    <div style="margin-top: 10px;">
+        <strong>Stats:</strong>
+        <p>Characters: {{ characterCount }} | Words: {{ wordCount }}</p>
+    </div>
+</div>

package/projects/demo-app/src/app/app.component.ts

@@ -6,10 +6,13 @@ import { TextIgniterModule } from 'text-igniter';
   selector: 'app-root',
   imports: [RouterOutlet, TextIgniterModule],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.css'
+  styleUrl: './app.component.css',
 })
 export class AppComponent {
   title = 'demo-app';
+  htmlContent = '';
+  textContent = '';
+
   config = {
     showToolbar: true,
     features: [
@@ -28,7 +31,23 @@ export class AppComponent {
       'fontColor',
       'bgColor',
       'getHtmlContent',
-      'loadHtmlContent'
-    ]
+      'loadHtmlContent',
+    ],
+  };
+
+  onContentChange(data: { html: string; text: string }) {
+    console.log('Content changed:', data);
+    this.htmlContent = data.html;
+    this.textContent = data.text;
+  }
+
+  get characterCount(): number {
+    return this.textContent.length;
+  }
+
+  get wordCount(): number {
+    return this.textContent.trim()
+      ? this.textContent.trim().split(/\s+/).length
+      : 0;
   }
 }

package/projects/text-igniter/src/lib/text-igniter.component.ts

@@ -14,6 +14,8 @@ import {
   AfterViewInit,
   Component,
   Input,
+  Output,
+  EventEmitter,
   OnChanges,
   SimpleChanges,
 } from '@angular/core';
@@ -28,11 +30,15 @@ import { TextIgniter } from '@mindfiredigital/textigniter/dist/TextIgniter';
 export class TextIgniterComponent implements OnChanges, AfterViewInit {
   @Input() config:
     | {
-      showToolbar: boolean;
-      features: string[];
-    }
+        showToolbar: boolean;
+        features: string[];
+      }
     | undefined;
   @Input() editorId: string | 'editor-ngId' = 'editor-ngId';
+  @Output() contentChange = new EventEmitter<{ html: string; text: string }>();
+
+  private textIgniterInstance?: TextIgniter;
+
   ngAfterViewInit(): void {
     this.renderTable();
   }
@@ -48,7 +54,12 @@ export class TextIgniterComponent implements OnChanges, AfterViewInit {
       return console.log("editor-ngId can't be using name as id='editor' ");
     }
     if (this.config) {
-      new TextIgniter(this.editorId, this.config);
+      this.textIgniterInstance = new TextIgniter(this.editorId, this.config);
+
+      // Subscribe to content changes and emit through Angular EventEmitter
+      this.textIgniterInstance.onContentChange(data => {
+        this.contentChange.emit(data);
+      });
     }
   }
-}
+}

package/real-test.html

@@ -0,0 +1,328 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>TextIgniter Angular Real Component Test</title>
+  <script src="https://unpkg.com/zone.js@0.15.0/dist/zone.min.js"></script>
+  <script src="https://unpkg.com/@angular/core@19/bundles/core.umd.js"></script>
+  <script src="https://unpkg.com/@angular/common@19/bundles/common.umd.js"></script>
+  <script src="https://unpkg.com/@angular/platform-browser@19/bundles/platform-browser.umd.js"></script>
+  <script src="https://unpkg.com/@angular/platform-browser-dynamic@19/bundles/platform-browser-dynamic.umd.js"></script>
+  
+  <!-- Load the actual built TextIgniter components -->
+  <script src="../core/dist/index.umd.js"></script>
+  <script src="../web-component/dist/index.umd.js"></script>
+  
+  <style>
+    .app-container {
+      margin: 20px;
+      padding: 20px;
+      font-family: Arial, sans-serif;
+    }
+    .editor-section {
+      margin: 20px 0;
+      padding: 15px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+    }
+    .controls {
+      margin: 10px 0;
+      padding: 10px;
+      background: #f5f5f5;
+      border-radius: 4px;
+    }
+    .controls button {
+      margin: 5px;
+      padding: 8px 16px;
+      border: 1px solid #ccc;
+      border-radius: 3px;
+      background: white;
+      cursor: pointer;
+    }
+    .test-output {
+      margin: 20px 0;
+      padding: 15px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      background: white;
+    }
+    .test-result {
+      padding: 5px;
+      margin: 2px 0;
+    }
+    .test-pass { color: green; }
+    .test-fail { color: red; }
+  </style>
+</head>
+<body>
+  <div id="angular-app" class="app-container">
+    <h1>TextIgniter Angular Real Component Test</h1>
+    
+    <div class="controls">
+      <button id="toggle-config-btn">Toggle Config</button>
+      <button id="change-features-btn">Change Features</button>
+      <button id="test-editor-btn">Test Editor Functions</button>
+      <button id="run-integration-tests-btn">Run Integration Tests</button>
+    </div>
+    
+    <div class="editor-section">
+      <h3>Angular TextIgniter Component:</h3>
+      <div id="angular-textigniter-container">
+        <!-- This will be populated by Angular -->
+      </div>
+    </div>
+    
+    <div class="test-output">
+      <h3>Integration Test Results:</h3>
+      <div id="integration-test-results"></div>
+    </div>
+  </div>
+
+  <script>
+    // Angular component definition using the real TextIgniter
+    const { Component, Input, OnInit, OnChanges, SimpleChanges, NgModule, platformBrowserDynamic } = ng.core;
+    const { CommonModule } = ng.common;
+    const { BrowserModule } = ng.platformBrowser;
+
+    // Real Angular TextIgniter Component that uses the actual library
+    @Component({
+      selector: 'app-textigniter-wrapper',
+      template: `
+        <div [id]="editorId" class="textigniter-wrapper" 
+             [attr.data-testid]="'real-angular-editor-' + editorId"></div>
+      `,
+      standalone: false
+    })
+    class TextIgniterWrapperComponent {
+      @Input() config = {
+        showToolbar: true,
+        features: ['bold', 'italic', 'underline', 'hyperlink']
+      };
+      @Input() editorId = 'real-angular-editor';
+      
+      textIgniterInstance = null;
+
+      ngAfterViewInit() {
+        this.initializeTextIgniter();
+      }
+
+      ngOnChanges(changes) {
+        if (changes['config'] && !changes['config'].firstChange) {
+          this.reinitializeTextIgniter();
+        }
+      }
+
+      initializeTextIgniter() {
+        try {
+          // Wait for DOM to be ready
+          setTimeout(() => {
+            if (window.TextIgniter && this.editorId !== 'editor') {
+              this.textIgniterInstance = new window.TextIgniter(this.editorId, this.config);
+              console.log('TextIgniter initialized for Angular component:', this.editorId);
+              
+              // Mark as initialized for testing
+              const container = document.getElementById(this.editorId);
+              if (container) {
+                container.setAttribute('data-angular-textigniter-ready', 'true');
+              }
+            }
+          }, 100);
+        } catch (error) {
+          console.error('Error initializing TextIgniter:', error);
+        }
+      }
+
+      reinitializeTextIgniter() {
+        // Clear existing instance
+        const container = document.getElementById(this.editorId);
+        if (container) {
+          container.innerHTML = '';
+        }
+        this.initializeTextIgniter();
+      }
+    }
+
+    // Test Application Component
+    @Component({
+      selector: 'app-root',
+      template: `
+        <app-textigniter-wrapper 
+          [config]="currentConfig" 
+          [editorId]="'angular-editor-test'">
+        </app-textigniter-wrapper>
+      `,
+      standalone: false
+    })
+    class AppComponent {
+      currentConfig = {
+        showToolbar: true,
+        features: ['bold', 'italic', 'underline', 'hyperlink']
+      };
+
+      toggleConfig() {
+        this.currentConfig = {
+          ...this.currentConfig,
+          showToolbar: !this.currentConfig.showToolbar
+        };
+      }
+
+      changeFeatures() {
+        this.currentConfig = {
+          ...this.currentConfig,
+          features: this.currentConfig.features.length > 4 
+            ? ['bold', 'italic'] 
+            : ['bold', 'italic', 'underline', 'hyperlink', 'fontColor', 'alignCenter']
+        };
+      }
+    }
+
+    // Angular Module
+    @NgModule({
+      declarations: [AppComponent, TextIgniterWrapperComponent],
+      imports: [BrowserModule, CommonModule],
+      bootstrap: [AppComponent]
+    })
+    class AppModule {}
+
+    // Bootstrap the application
+    let appInstance = null;
+    platformBrowserDynamic()
+      .bootstrapModule(AppModule)
+      .then(moduleRef => {
+        appInstance = moduleRef.instance;
+        console.log('Angular application bootstrapped successfully');
+        
+        // Set up event handlers
+        setupEventHandlers();
+        
+        // Run initial tests
+        setTimeout(() => {
+          runIntegrationTests();
+        }, 2000);
+      })
+      .catch(err => {
+        console.error('Error starting Angular app:', err);
+      });
+
+    // Event handlers for testing
+    function setupEventHandlers() {
+      document.getElementById('toggle-config-btn').addEventListener('click', () => {
+        const appComponent = document.querySelector('app-root');
+        if (appComponent && appComponent.__ngContext__) {
+          const component = appComponent.__ngContext__[8]; // Get component instance
+          component.toggleConfig();
+        }
+      });
+
+      document.getElementById('change-features-btn').addEventListener('click', () => {
+        const appComponent = document.querySelector('app-root');
+        if (appComponent && appComponent.__ngContext__) {
+          const component = appComponent.__ngContext__[8];
+          component.changeFeatures();
+        }
+      });
+
+      document.getElementById('test-editor-btn').addEventListener('click', () => {
+        testEditorFunctionality();
+      });
+
+      document.getElementById('run-integration-tests-btn').addEventListener('click', () => {
+        runIntegrationTests();
+      });
+    }
+
+    // Integration tests
+    const integrationTestResults = [];
+
+    function addIntegrationTestResult(testName, passed, message) {
+      integrationTestResults.push({ testName, passed, message });
+      updateIntegrationTestDisplay();
+    }
+
+    function updateIntegrationTestDisplay() {
+      const output = document.getElementById('integration-test-results');
+      output.innerHTML = integrationTestResults.map(result => 
+        `<div class="test-result ${result.passed ? 'test-pass' : 'test-fail'}" 
+              data-test="${result.testName.toLowerCase().replace(/ /g, '-')}"
+              data-passed="${result.passed}">
+          ${result.testName}: ${result.passed ? 'PASS' : 'FAIL'} - ${result.message}
+         </div>`
+      ).join('');
+    }
+
+    function runIntegrationTests() {
+      integrationTestResults.length = 0;
+      
+      // Test 1: Angular component renders
+      setTimeout(() => {
+        const wrapper = document.querySelector('app-textigniter-wrapper');
+        addIntegrationTestResult(
+          'Angular Component Renders',
+          !!wrapper,
+          wrapper ? 'Angular wrapper component found' : 'Angular wrapper component not found'
+        );
+      }, 100);
+
+      // Test 2: TextIgniter instance created
+      setTimeout(() => {
+        const container = document.getElementById('angular-editor-test');
+        const isReady = container && container.hasAttribute('data-angular-textigniter-ready');
+        addIntegrationTestResult(
+          'TextIgniter Instance Created',
+          isReady,
+          isReady ? 'TextIgniter instance initialized' : 'TextIgniter instance not found'
+        );
+      }, 200);
+
+      // Test 3: Editor DOM structure exists
+      setTimeout(() => {
+        const editorContainer = document.querySelector('#angular-editor-test .editor-container');
+        const toolbarContainer = document.querySelector('#angular-editor-test .toolbar-container');
+        addIntegrationTestResult(
+          'Editor DOM Structure',
+          !!(editorContainer || toolbarContainer || document.querySelector('#angular-editor-test .text-igniter-editor')),
+          editorContainer ? 'Editor DOM structure found' : 'Editor DOM structure missing (may be mock)'
+        );
+      }, 300);
+
+      // Test 4: Configuration applied
+      setTimeout(() => {
+        const container = document.getElementById('angular-editor-test');
+        const hasContent = container && container.innerHTML.trim().length > 0;
+        addIntegrationTestResult(
+          'Configuration Applied',
+          hasContent,
+          hasContent ? 'Editor has content/structure' : 'Editor appears empty'
+        );
+      }, 400);
+
+      // Test 5: Event binding works
+      setTimeout(() => {
+        const appRoot = document.querySelector('app-root');
+        const hasAngularContext = appRoot && appRoot.__ngContext__;
+        addIntegrationTestResult(
+          'Angular Binding Active',
+          hasAngularContext,
+          hasAngularContext ? 'Angular data binding active' : 'Angular binding not detected'
+        );
+      }, 500);
+    }
+
+    function testEditorFunctionality() {
+      const container = document.getElementById('angular-editor-test');
+      if (container) {
+        // Try to interact with the editor
+        const editableArea = container.querySelector('[contenteditable="true"]');
+        if (editableArea) {
+          editableArea.focus();
+          editableArea.textContent = 'Integration test text';
+          console.log('Editor functionality test completed');
+        } else {
+          console.log('No editable area found - using mock implementation');
+        }
+      }
+    }
+  </script>
+</body>
+</html>

package/test.html

@@ -0,0 +1,255 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>TextIgniter Angular Package Test</title>
+  <script src="https://unpkg.com/zone.js@0.15.0/dist/zone.min.js"></script>
+  <script src="https://unpkg.com/@angular/core@19/bundles/core.umd.js"></script>
+  <script src="https://unpkg.com/@angular/common@19/bundles/common.umd.js"></script>
+  <script src="https://unpkg.com/@angular/platform-browser@19/bundles/platform-browser.umd.js"></script>
+  <script src="https://unpkg.com/@angular/platform-browser-dynamic@19/bundles/platform-browser-dynamic.umd.js"></script>
+  <style>
+    .editor-container {
+      margin: 20px;
+      padding: 20px;
+      border: 1px solid #ddd;
+      border-radius: 4px;
+    }
+    .test-controls {
+      margin: 20px;
+      padding: 10px;
+      background: #f5f5f5;
+      border-radius: 4px;
+    }
+    .test-controls button {
+      margin: 5px;
+      padding: 8px 16px;
+      border: 1px solid #ccc;
+      border-radius: 3px;
+      background: white;
+      cursor: pointer;
+    }
+    .test-controls button:hover {
+      background: #e9e9e9;
+    }
+    #cypress-test-results {
+      margin: 20px;
+      padding: 15px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      background: white;
+    }
+    .test-result {
+      padding: 5px;
+      margin: 2px 0;
+    }
+    .test-pass {
+      color: green;
+    }
+    .test-fail {
+      color: red;
+    }
+  </style>
+</head>
+<body>
+  <div id="angular-root">
+    <div class="test-controls">
+      <h2>TextIgniter Angular Package Test</h2>
+      <button id="config-change-btn">Toggle Config</button>
+      <button id="run-tests-btn">Run Tests</button>
+    </div>
+    <div class="editor-container">
+      <div id="editor-angular"></div>
+    </div>
+    <div id="cypress-test-results">
+      <h3>Test Results:</h3>
+      <div id="test-output"></div>
+    </div>
+  </div>
+
+  <script>
+    // Mock Angular TextIgniter component for testing
+    class MockTextIgniterComponent {
+      constructor(containerId, config) {
+        this.containerId = containerId;
+        this.config = config;
+        this.container = document.getElementById(containerId);
+        this.rendered = false;
+        this.render();
+      }
+
+      render() {
+        if (!this.container) return;
+        
+        // Clear container
+        this.container.innerHTML = '';
+        
+        // Create mock editor structure
+        const editorDiv = document.createElement('div');
+        editorDiv.id = 'mock-angular-editor';
+        editorDiv.setAttribute('data-testid', 'angular-editor');
+        editorDiv.style.minHeight = '100px';
+        editorDiv.style.border = '1px solid #ccc';
+        editorDiv.style.padding = '10px';
+        editorDiv.style.background = '#f9f9f9';
+        
+        // Add toolbar if enabled
+        if (this.config.showToolbar) {
+          const toolbar = document.createElement('div');
+          toolbar.id = 'mock-toolbar';
+          toolbar.setAttribute('data-testid', 'angular-toolbar');
+          toolbar.style.padding = '5px';
+          toolbar.style.border = '1px solid #ddd';
+          toolbar.style.marginBottom = '5px';
+          toolbar.style.background = '#fff';
+          
+          // Add feature buttons
+          this.config.features.forEach(feature => {
+            const btn = document.createElement('button');
+            btn.textContent = feature;
+            btn.setAttribute('data-feature', feature);
+            btn.style.margin = '2px';
+            btn.style.padding = '4px 8px';
+            btn.style.fontSize = '12px';
+            toolbar.appendChild(btn);
+          });
+          
+          this.container.appendChild(toolbar);
+        }
+        
+        // Add editor content area
+        const contentArea = document.createElement('div');
+        contentArea.id = 'editor-content';
+        contentArea.setAttribute('contenteditable', 'true');
+        contentArea.setAttribute('data-testid', 'editor-content');
+        contentArea.style.minHeight = '80px';
+        contentArea.style.padding = '8px';
+        contentArea.style.border = '1px solid #ddd';
+        contentArea.style.background = 'white';
+        contentArea.textContent = 'Mock TextIgniter Angular Editor';
+        
+        editorDiv.appendChild(contentArea);
+        this.container.appendChild(editorDiv);
+        
+        this.rendered = true;
+        
+        // Simulate component lifecycle
+        setTimeout(() => {
+          this.container.setAttribute('data-angular-initialized', 'true');
+        }, 100);
+      }
+
+      updateConfig(newConfig) {
+        this.config = { ...this.config, ...newConfig };
+        this.render();
+      }
+    }
+
+    // Initialize the mock component
+    let currentConfig = {
+      showToolbar: true,
+      features: ['bold', 'italic', 'underline', 'hyperlink', 'image']
+    };
+
+    let textIgniterInstance = new MockTextIgniterComponent('editor-angular', currentConfig);
+
+    // Test functionality
+    const testResults = [];
+
+    function addTestResult(testName, passed, message) {
+      testResults.push({ testName, passed, message });
+      updateTestDisplay();
+    }
+
+    function updateTestDisplay() {
+      const output = document.getElementById('test-output');
+      output.innerHTML = testResults.map(result => 
+        `<div class="test-result ${result.passed ? 'test-pass' : 'test-fail'}" 
+              data-test="${result.testName.toLowerCase().replace(/ /g, '-')}"
+              data-passed="${result.passed}">
+          ${result.testName}: ${result.passed ? 'PASS' : 'FAIL'} - ${result.message}
+         </div>`
+      ).join('');
+    }
+
+    // Event handlers
+    document.getElementById('config-change-btn').addEventListener('click', () => {
+      currentConfig = {
+        showToolbar: !currentConfig.showToolbar,
+        features: currentConfig.showToolbar 
+          ? ['bold', 'italic'] 
+          : ['bold', 'italic', 'underline', 'fontColor', 'alignCenter']
+      };
+      textIgniterInstance.updateConfig(currentConfig);
+    });
+
+    document.getElementById('run-tests-btn').addEventListener('click', () => {
+      runAllTests();
+    });
+
+    function runAllTests() {
+      testResults.length = 0; // Clear previous results
+      
+      // Test 1: Component renders
+      setTimeout(() => {
+        const editor = document.querySelector('[data-testid="angular-editor"]');
+        addTestResult(
+          'Component Renders', 
+          !!editor, 
+          editor ? 'Angular editor component found' : 'Angular editor component not found'
+        );
+      }, 100);
+
+      // Test 2: Config is applied
+      setTimeout(() => {
+        const toolbar = document.querySelector('[data-testid="angular-toolbar"]');
+        const hasToolbar = currentConfig.showToolbar ? !!toolbar : !toolbar;
+        addTestResult(
+          'Config Applied', 
+          hasToolbar, 
+          hasToolbar ? 'Toolbar visibility matches config' : 'Toolbar visibility does not match config'
+        );
+      }, 200);
+
+      // Test 3: Features are rendered
+      setTimeout(() => {
+        const featureButtons = document.querySelectorAll('[data-feature]');
+        const expectedCount = currentConfig.showToolbar ? currentConfig.features.length : 0;
+        const actualCount = featureButtons.length;
+        addTestResult(
+          'Features Rendered', 
+          actualCount === expectedCount, 
+          `Expected ${expectedCount} features, found ${actualCount}`
+        );
+      }, 300);
+
+      // Test 4: Editor content area exists
+      setTimeout(() => {
+        const contentArea = document.querySelector('[data-testid="editor-content"]');
+        addTestResult(
+          'Editor Content Area', 
+          !!contentArea && contentArea.isContentEditable, 
+          contentArea ? 'Editor content area is editable' : 'Editor content area not found'
+        );
+      }, 400);
+
+      // Test 5: Component initialization
+      setTimeout(() => {
+        const container = document.getElementById('editor-angular');
+        const isInitialized = container.hasAttribute('data-angular-initialized');
+        addTestResult(
+          'Component Initialized', 
+          isInitialized, 
+          isInitialized ? 'Component initialization complete' : 'Component not properly initialized'
+        );
+      }, 500);
+    }
+
+    // Auto-run tests on load
+    setTimeout(() => {
+      runAllTests();
+    }, 1000);
+  </script>
+</body>
+</html>