https://github.com/jaychase/ngx-arrow-state
https://github.com/jaychase/ngx-arrow-state
Last synced: 3 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/jaychase/ngx-arrow-state
- Owner: JayChase
- License: mit
- Created: 2026-01-02T02:28:40.000Z (26 days ago)
- Default Branch: main
- Last Pushed: 2026-01-02T02:57:02.000Z (26 days ago)
- Last Synced: 2026-01-07T18:57:10.409Z (20 days ago)
- Language: TypeScript
- Size: 110 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license.md
Awesome Lists containing this project
- fucking-awesome-angular - ngx-arrow-state - An Angular library that provides terminal/shell-like input history navigation using arrow keys, plus Ctrl+Enter form submission for textareas. (Third Party Components / Keyboard Mouse)
- awesome-angular - ngx-arrow-state - An Angular library that provides terminal/shell-like input history navigation using arrow keys, plus Ctrl+Enter form submission for textareas. (Third Party Components / Keyboard Mouse)
README
# ngx-arrow-state
[](https://github.com/JayChase/ngx-arrow-state/actions/workflows/ci.yml)
[](https://www.npmjs.com/package/ngx-arrow-state)
An Angular library that provides terminal/shell-like input history navigation using arrow keys, and Ctrl+Enter form submission.
Improve UX for chat interfaces, command-line style inputs, and AI prompt interfaces by letting users:
- ⬆️ **Arrow Up** - Navigate to previous input values
- ⬇️ **Arrow Down** - Navigate to next input values
- ⌨️ **Ctrl+Enter** - Submit forms from textarea inputs (since Enter creates newlines)
## Features
- Works with both `` and `` elements
- Smart cursor detection for textarea inputs (only navigates history when cursor is at start/end)
- Circular history navigation
- Standalone directives (no module required)
- Fully tested
- Lightweight with no dependencies
## Install
```bash
npm i -S ngx-arrow-state
```
## Compatibility
| Angular Version | Package Version |
| --------------- | --------------- |
| 21.x | 0.0.x |
## Usage
### ArrowState Directive
Add the `ngxArrowState` directive to any text input or textarea within a reactive form to enable arrow key history navigation.
```typescript
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ArrowState } from 'ngx-arrow-state';
@Component({
selector: 'app-chat',
imports: [ReactiveFormsModule, ArrowState],
template: `
Send
`,
})
export class ChatComponent {
formGroup = new FormGroup({
message: new FormControl(null),
});
send() {
console.log(this.formGroup.value);
this.formGroup.reset();
}
}
```
#### How it works
1. When the form is submitted, the current input value is saved to history
2. Press **Arrow Up** (when cursor is at the start) to cycle backwards through history
3. Press **Arrow Down** (when cursor is at the end) to cycle forwards through history
#### Textarea behavior
For `` elements, the directive intelligently detects cursor position:
- **Arrow Up** only navigates history when the cursor is at position 0 (start of text)
- **Arrow Down** only navigates history when the cursor is at the end of the text
- Normal arrow key behavior is preserved when the cursor is in the middle of the text
This allows users to navigate multi-line text normally while still accessing history at the boundaries.
### SubmitOnCtrlEnter Directive
Add the `ngxSubmitOnCtrlEnter` directive to enable form submission with Ctrl+Enter. This is especially useful for textarea inputs where Enter creates a new line.
```typescript
import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { ArrowState, SubmitOnCtrlEnter } from 'ngx-arrow-state';
@Component({
selector: 'app-chat',
imports: [ReactiveFormsModule, ArrowState, SubmitOnCtrlEnter],
template: `
Send
`,
})
export class ChatComponent {
formGroup = new FormGroup({
message: new FormControl(null),
});
send() {
console.log(this.formGroup.value);
this.formGroup.reset();
}
}
```
### Using both directives together
For the best chat/prompt experience, use both directives together:
```html
```
## API Reference
### ArrowState
| Selector | `input[type="text"][ngxArrowState], textarea[ngxArrowState]` |
| -------- | ------------------------------------------------------------ |
The directive automatically:
- Captures values on form submission
- Provides circular navigation through history
- Respects cursor position in textareas
### SubmitOnCtrlEnter
| Selector | `[ngxSubmitOnCtrlEnter]` |
| -------- | ------------------------ |
Triggers form submission when Ctrl+Enter is pressed. Works on any element within a reactive form.
## Requirements
- Angular 21+
- `@angular/forms` (ReactiveFormsModule)
## Development
To clone this repo and run it locally:
```bash
git clone https://github.com/JayChase/ngx-arrow-state.git
cd ngx-arrow-state
npm install
npm run build
```
### Demo
```bash
ng serve demo
```
### Run tests
```bash
npm test
```
## License
MIT