https://github.com/alorel/ngx-auto-id

Automatically generates and applies the id attribute on elements
https://github.com/alorel/ngx-auto-id

angular auto directive generator id id-generator ngx

Last synced: about 12 hours ago
JSON representation

Automatically generates and applies the id attribute on elements

• Host: GitHub
• URL: https://github.com/alorel/ngx-auto-id
• Owner: Alorel
• License: mit
• Created: 2019-02-02T17:03:16.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T21:42:06.000Z (over 1 year ago)
• Last Synced: 2024-09-18T17:13:10.605Z (15 days ago)
• Topics: angular, auto, directive, generator, id, id-generator, ngx
• Language: TypeScript
• Size: 1.89 MB
• Stars: 0
• Watchers: 3
• Forks: 1
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: .github/CONTRIBUTING.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        
# ngx-auto-id

Automatic ID generator for Angular

[![Build Status](https://travis-ci.com/Alorel/ngx-auto-id.svg?branch=2.0.0)](https://travis-ci.com/Alorel/ngx-auto-id)

[![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)

[![Greenkeeper badge](https://badges.greenkeeper.io/Alorel/ngx-auto-id.svg)](https://greenkeeper.io/)

-----

# Table of Contents

- [Installation](#installation)

- [Usage](#usage)

  - [Automatically setting the default ID](#automatically-setting-the-default-id)

  - [Controlling the ID prefix](#controlling-the-id-prefix)

    - [Setting the default ID prefix](#setting-the-default-id-prefix)

  - [Generating an ID without setting it](#generating-an-id-without-setting-it)

  - [Typical usage within forms](#typical-usage-within-forms)

# Installation

```bash

npm install @aloreljs/ngx-auto-id@^2.0.0 # for Angular 8

npm install @aloreljs/ngx-auto-id@^1.0.0 # for Angular 7

```

# Usage

In whatever module you want to use the directive in:

```typescript

import {NgxAutoIdModule} from '@aloreljs/ngx-auto-id';

@NgModule({

  imports: [NgxAutoIdModule]

})

export class MyFancyModule {}

```

## Automatically setting the default ID

```html





```


Outputs:

```html





```


## Controlling the ID prefix

```html





```


Outputs:

```html





```


### Setting the default ID prefix

You might want to replace the default "el-" prefix with your own; in this case, you should provide a value for

the NGX_AUTO_ID_DEFAULT_PREFIX token:

```typescript

import {NgModule} from '@angular/core';

import {NGX_AUTO_ID_DEFAULT_PREFIX} from '@aloreljs/ngx-auto-id';

@NgModule({

  //... declarations etc

  providers: [{

    provide: NGX_AUTO_ID_DEFAULT_PREFIX,

    useValue: 'my-prefix-'

  }]

})

export class AppModule {

  

}

```

## Generating an ID without setting it

```html

 



 

```


Outputs:

```html







```


## Typical usage within forms

```html

Username:

```