{"id":15597107,"url":"https://github.com/alorel/ngx-auto-id","last_synced_at":"2025-03-29T11:44:53.158Z","repository":{"id":34448568,"uuid":"168855085","full_name":"Alorel/ngx-auto-id","owner":"Alorel","description":"Automatically generates and applies the id attribute on elements","archived":false,"fork":false,"pushed_at":"2023-01-04T21:42:06.000Z","size":1987,"stargazers_count":0,"open_issues_count":2,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T19:57:32.816Z","etag":null,"topics":["angular","auto","directive","generator","id","id-generator","ngx"],"latest_commit_sha":null,"homepage":null,"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/Alorel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null}},"created_at":"2019-02-02T17:03:16.000Z","updated_at":"2022-11-10T09:32:34.000Z","dependencies_parsed_at":"2023-01-15T07:15:34.379Z","dependency_job_id":null,"html_url":"https://github.com/Alorel/ngx-auto-id","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alorel%2Fngx-auto-id","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alorel%2Fngx-auto-id/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alorel%2Fngx-auto-id/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Alorel%2Fngx-auto-id/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Alorel","download_url":"https://codeload.github.com/Alorel/ngx-auto-id/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246180888,"owners_count":20736459,"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","auto","directive","generator","id","id-generator","ngx"],"created_at":"2024-10-03T01:20:30.794Z","updated_at":"2025-03-29T11:44:53.131Z","avatar_url":"https://github.com/Alorel.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# ngx-auto-id\n\nAutomatic ID generator for Angular\n\n[![Build Status](https://travis-ci.com/Alorel/ngx-auto-id.svg?branch=2.0.0)](https://travis-ci.com/Alorel/ngx-auto-id)\n[![Coverage Status](https://coveralls.io/repos/github/Alorel/ngx-auto-id/badge.svg?branch=2.0.0)](https://coveralls.io/github/Alorel/ngx-auto-id?branch=2.0.0)\n[![Greenkeeper badge](https://badges.greenkeeper.io/Alorel/ngx-auto-id.svg)](https://greenkeeper.io/)\n\n-----\n\n# Table of Contents\n\n\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n\n- [Installation](#installation)\n- [Usage](#usage)\n  - [Automatically setting the default ID](#automatically-setting-the-default-id)\n  - [Controlling the ID prefix](#controlling-the-id-prefix)\n    - [Setting the default ID prefix](#setting-the-default-id-prefix)\n  - [Generating an ID without setting it](#generating-an-id-without-setting-it)\n  - [Typical usage within forms](#typical-usage-within-forms)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n# Installation\n\n```bash\nnpm install @aloreljs/ngx-auto-id@^2.0.0 # for Angular 8\nnpm install @aloreljs/ngx-auto-id@^1.0.0 # for Angular 7\n```\n\n# Usage\n\nIn whatever module you want to use the directive in:\n\n```typescript\nimport {NgxAutoIdModule} from '@aloreljs/ngx-auto-id';\n\n@NgModule({\n  imports: [NgxAutoIdModule]\n})\nexport class MyFancyModule {}\n```\n\n## Automatically setting the default ID\n\n```html\n\u003cdiv ngx-auto-id\u003e\u003c/div\u003e\n\u003cdiv ngx-auto-id\u003e\u003c/div\u003e\n```\n\nOutputs:\n\n```html\n\u003cdiv id=\"el-1\"\u003e\u003c/div\u003e\n\u003cdiv id=\"el-2\"\u003e\u003c/div\u003e\n```\n\n## Controlling the ID prefix\n\n```html\n\u003cdiv ngx-auto-id\u003e\u003c/div\u003e\n\u003cdiv ngx-auto-id id-prefix=\"fancy-\"\u003e\u003c/div\u003e\n```\n\nOutputs:\n\n```html\n\u003cdiv id=\"el-3\"\u003e\u003c/div\u003e\n\u003cdiv id=\"fancy-1\"\u003e\u003c/div\u003e\n```\n\n### Setting the default ID prefix\n\nYou might want to replace the default \"el-\" prefix with your own; in this case, you should provide a value for\nthe NGX_AUTO_ID_DEFAULT_PREFIX token:\n\n```typescript\nimport {NgModule} from '@angular/core';\nimport {NGX_AUTO_ID_DEFAULT_PREFIX} from '@aloreljs/ngx-auto-id';\n\n@NgModule({\n  //... declarations etc\n  providers: [{\n    provide: NGX_AUTO_ID_DEFAULT_PREFIX,\n    useValue: 'my-prefix-'\n  }]\n})\nexport class AppModule {\n  \n}\n```\n\n## Generating an ID without setting it\n\n```html\n\u003cdiv [ngx-auto-id]=\"false\" #autoID=\"ngx-auto-id\"\u003e\u003c/div\u003e \u003c!-- Must be strictly false, not falsy --\u003e\n\u003cdiv [id]=\"autoID.toString()\"\u003e\u003c/div\u003e\n\u003cdiv [id]=\"autoID\"\u003e\u003c/div\u003e \u003c!-- The .toString() method returns the ID --\u003e\n```\n\nOutputs:\n\n```html\n\u003cdiv\u003e\u003c/div\u003e\n\u003cdiv id=\"el-4\"\u003e\u003c/div\u003e\n\u003cdiv id=\"el-4\"\u003e\u003c/div\u003e\n```\n\n## Typical usage within forms\n\n```html\n\u003clabel [for]=\"idUsername\"\u003eUsername:\u003c/label\u003e\n\u003cinput ngx-auto-id #idUsername=\"ngx-auto-id\"/\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falorel%2Fngx-auto-id","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falorel%2Fngx-auto-id","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falorel%2Fngx-auto-id/lists"}