ng-grab

Angular 17+ context-grabber library aligned with react-grab behavior.

Install

pnpm add ng-grab

Quickstart (side-effect)

import 'ng-grab/auto';

Runs only in dev mode.

Explicit setup (recommended)

import { ApplicationConfig } from '@angular/core';
import { provideAngularGrab } from 'ng-grab/angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAngularGrab({
      devOnly: true,
      securityMode: 'secure-default',
      onPromptSubmit: async (prompt, context) => {
        // send prompt + selected context to your agent backend
        console.log(prompt, context.selected);
      }
    })
  ]
};

Optional host directive:

import { Component } from '@angular/core';
import { GrabHostDirective } from 'ng-grab/angular';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [GrabHostDirective],
  template: `<main grabHost></main>`
})
export class AppComponent {}

Behavior

• Hover highlight + floating component label
• Context menu + toolbar controls with shortcut-aware actions
• Drag multi-select (Shift + drag)
• History dropdown (copy/remove/clear/copy all) + session persistence
• Prompt panel with lifecycle state (idle/editing/submitting/submitted/error)
• Plugin actions/hooks/theme/setup support
• Agent parity primitives (select*, history*, prompt*, runAction, getSource, getStackContext)
• Copy output format:

<element html>
in <ComponentName> at <path>:<line>:<col>

path always present (unknown fallback). line/col are best-effort (? when unavailable). Multi-select output is indexed ([1], [2], ...).

Security Modes

securityMode: 'secure-default' (default):

• Sensitive elements excluded:
  • input[type="password"]
  • input[type="hidden"]
  • [data-react-grab-private]
  • [data-react-grab-ignore]
• Redaction before clipboard/history/prompt sinks
• Resolver fails closed outside dev mode or without window.ng

securityMode: 'react-strict':

• Only [data-react-grab-ignore] is excluded
• No automatic redaction/path normalization (closest behavior parity with react-grab)

Support policy

• Angular integration target: >=17
• CI baseline intent: ^19 || ^20 || ^21

Limitations

• Source location precision depends on debug globals and sourcemap setup.
• Library expects browser environment (no SSR runtime execution).