ngx-auto-id
Automatic ID generator for Angular
Table of Contents
Installation
npm install @aloreljs/ngx-auto-id@^2.0.0 # for Angular 8
npm install @aloreljs/ngx-auto-id@^1.0.0 # for Angular 7Usage
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"/>
![greenkeeper[bot]](https://avatars.githubusercontent.com/u/23040076?size=120)
![dependabot[bot]](https://avatars.githubusercontent.com/u/49699333?size=120)
