{"id":18986046,"url":"https://github.com/deanpdx/angular-input-focus","last_synced_at":"2025-04-19T20:35:19.602Z","repository":{"id":34986896,"uuid":"192623800","full_name":"DeanPDX/angular-input-focus","owner":"DeanPDX","description":"An Angular directive that allows you to control focus including autofocus-like functionality","archived":false,"fork":false,"pushed_at":"2023-02-04T11:22:50.000Z","size":3079,"stargazers_count":4,"open_issues_count":9,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T13:05:44.731Z","etag":null,"topics":["angular","attribute","directive","focus","forms","input"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DeanPDX.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-06-18T23:08:36.000Z","updated_at":"2022-01-24T18:46:15.000Z","dependencies_parsed_at":"2023-02-18T15:55:15.403Z","dependency_job_id":null,"html_url":"https://github.com/DeanPDX/angular-input-focus","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeanPDX%2Fangular-input-focus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeanPDX%2Fangular-input-focus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeanPDX%2Fangular-input-focus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DeanPDX%2Fangular-input-focus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DeanPDX","download_url":"https://codeload.github.com/DeanPDX/angular-input-focus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249250820,"owners_count":21237961,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","attribute","directive","focus","forms","input"],"created_at":"2024-11-08T16:29:21.815Z","updated_at":"2025-04-16T14:32:44.127Z","avatar_url":"https://github.com/DeanPDX.png","language":"TypeScript","readme":"# Angular Input Focus Attribute Directive\nThis package is for handling focus on html elements in Angular apps. It is tightly coupled with the DOM but safe to use in server-side rendering settings since we are checking to make sure the directive is running in a browser before using any DOM-specific functions.\n\n[![NPM](https://img.shields.io/npm/v/angular-input-focus.svg)](https://www.npmjs.com/package/angular-input-focus)\n[![Build Status](https://img.shields.io/appveyor/ci/DeanPDX/angular-input-focus.svg)](https://ci.appveyor.com/project/DeanPDX/angular-input-focus)\n[![Test Status](https://img.shields.io/appveyor/tests/DeanPDX/angular-input-focus.svg)](https://ci.appveyor.com/project/DeanPDX/angular-input-focus/build/tests)\n[![Code Coverage](https://img.shields.io/codecov/c/github/DeanPDX/angular-input-focus.svg)](https://codecov.io/gh/DeanPDX/angular-input-focus)\n[![Issues](https://img.shields.io/github/issues/DeanPDX/angular-input-focus)](https://img.shields.io/github/issues/DeanPDX/angular-input-focus)\n[![License](https://img.shields.io/github/license/DeanPDX/angular-input-focus.svg)](https://github.com/DeanPDX/angular-input-focus/blob/master/LICENSE)\n\n## Installation\nInstall using NPM:\n\n```bash\nnpm install angular-input-focus --save\n```\n\nNext, import the module in your application module:\n\n```typescript\nimport { AngularInputFocusModule } from 'angular-input-focus';\n\n@NgModule({\n  imports: [AngularInputFocusModule]\n})\n```\n\nNow you're ready to use the directive in your project.\n\n## Usage\nHere are some standard use cases.\n\n### Autofocus\nFor autofocus-like functionality, you can set `libFocus` to true (or a condition):\n\n```html\n\u003c!-- Focus First name when control is rendered --\u003e\nFirst name: \u003cinput type=\"text\" name=\"fname\" [libFocus]=\"true\"\u003e\nLast name: \u003cinput type=\"text\" name=\"lname\"\u003e\n```\n\n### Focus using an EventEmitter\nYou can also pass an `EventEmitter\u003cboolean\u003e` to the `setFocus` input. Imagine a component called `MyComponent`:\n\n```typescript\nexport class MyComponent {\n    // We will pass this to the directive in our view\n    focusEvent = new EventEmitter\u003cboolean\u003e();\n    // When called, will set the focus on our input\n    setFocus() {\n        this.focusEvent.emit(true);\n    }\n}\n```\n\nIn the template for `MyComponent`:\n\n```html\n\u003cinput [libFocus]=\"false\" [setFocus]=\"focusEvent\"\u003e`\n```\n\nWhenever your `focusEvent` emits a value, your element will focus/blur depending on whether the emitted value is `true` or `false`. You can find a working example of this in the [tester app](https://github.com/DeanPDX/angular-input-focus/blob/c65380d9bd1ad5ad0c43c4abf5d6312015c622b6/src/app/app.component.ts#L14) for the project.\n\n### Focus last element with dynamic elements\nYou don't need to use `EventEmitter` for this. Simply set `libFocus` to a conditional boolean value:\n\n```typescript\nrows = ['First', 'Second'];\n\naddRow() {\n  this.rows.push('');\n}\n\nshouldFocusRow(index: number): boolean {\n  return index + 1 === this.rows.length;\n}\n\ntrackByIndex(index, row) {\n  return index;\n}\n```\n\nAnd in your template:\n\n```html\n\u003cbutton (click)=\"addRow()\"\u003eAdd row\u003c/button\u003e\n\n\u003c!-- Important to use trackBy to prevent stuttering on input. --\u003e\n\u003cdiv *ngFor=\"let row of this.rows; let i = index; trackBy: trackByIndex\"\u003e\n  \u003cinput id=\"row{{ i }}\" [libFocus]=\"shouldFocusRow(i)\" [(ngModel)]=\"rows[i]\" /\u003e\n\u003c/div\u003e\n```\n\nIt's important in general to use `trackBy` for dynamic inputs to avoid UI stutter as you're typing. Here's [a working StackBlitz example](https://stackblitz.com/edit/angular-ivy-thgjm2?file=src%2Fapp%2Fapp.component.ts) you can run and modify.\n\n### Note on skipChangeDetection\n\nIf you're using [Angular Material](https://material.angular.io/), Change Detection needs to run after setting focus because Angular Material tracks focus; otherwise you will get the dreaded `ExpressionChangedAfterItHasBeenCheckedError` exception. If you are using native HTML inputs, you can skip change detection by setting `[skipChangeDetection]=\"true\"`.\n\n## Development\n\nThe main app (`angular-input-focus-tester`) is for testing the `angular-input-focus` library in the `projects` folder. Run `ng serve` to build and serve the test app.\n\nTo publish a new version of the library to [NPM](https://www.npmjs.com/), run `npm run publish-lib`. This will do the following:\n\n* Run `npm version patch` to create a new patch.\n* Build the library.\n* Copy readme/license from the main project to the library.\n* Publish the patch on NPM.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeanpdx%2Fangular-input-focus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeanpdx%2Fangular-input-focus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeanpdx%2Fangular-input-focus/lists"}