Angular

Use Anti-AI UI Framework with Angular for enterprise-grade automation resistance.

Installation

Install via npm:

Installation
1.npm install anti-ai-ui

Basic Usage

Use the vanilla JS API with Angular lifecycle hooks:

Basic Usage
1.import { Component, ElementRef, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
2.import { runawayButton } from 'anti-ai-ui/vanilla';
3.

4.@Component({
5.  selector: 'app-form',
6.  template: `
7.    <div #container style="position: relative; height: 200px">
8.      <!-- Button will be injected here -->
9.    </div>
10.  `
11.})
12.export class FormComponent implements AfterViewInit, OnDestroy {
13.  @ViewChild('container') containerRef!: ElementRef;
14.  private cleanup?: () => void;
15.

16.  ngAfterViewInit() {
17.    this.cleanup = runawayButton(this.containerRef.nativeElement, {
18.      buttonText: 'Submit',
19.      evasionDistance: 140,
20.      onCatch: () => {
21.        console.log('Button caught!');
22.      }
23.    });
24.  }
25.

26.  ngOnDestroy() {
27.    if (this.cleanup) {
28.      this.cleanup();
29.    }
30.  }
31.}

Best Practices

  • Always cleanup: Call cleanup functions in ngOnDestroy
  • Use ViewChild: Access DOM elements with @ViewChild
  • TypeScript: The framework includes full TypeScript definitions

Next Steps