ngx-auto-id

Automatic ID generator for Angular

Table of Contents

• Installation
• Usage
  • Automatically setting the default ID
  • Controlling the ID prefix
    • Setting the default ID prefix
  • Generating an ID without setting it
  • Typical usage within forms

Installation

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:

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

@NgModule({
  imports: [NgxAutoIdModule]
})
export class MyFancyModule {}

Automatically setting the default ID

<div ngx-auto-id></div>
<div ngx-auto-id></div>

Outputs:

<div id="el-1"></div>
<div id="el-2"></div>

Controlling the ID prefix

<div ngx-auto-id></div>
<div ngx-auto-id id-prefix="fancy-"></div>

Outputs:

<div id="el-3"></div>
<div id="fancy-1"></div>

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:

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

<div [ngx-auto-id]="false" #autoID="ngx-auto-id"></div> <!-- Must be strictly false, not falsy -->
<div [id]="autoID.toString()"></div>
<div [id]="autoID"></div> <!-- The .toString() method returns the ID -->

Outputs:

<div></div>
<div id="el-4"></div>
<div id="el-4"></div>

Typical usage within forms

<label [for]="idUsername">Username:</label>
<input ngx-auto-id #idUsername="ngx-auto-id"/>