@aloreljs/ngx-auto-id

ngx-auto-id

Automatic ID generator for Angular

---

Table of Contents

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

Installation

npm install @aloreljs/ngx-auto-id #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>

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"/>

Changelog

1.0.2 (2019-03-28)

Bug Fixes

• build: Add author, homepage, bugs package fields (bd27f3a)
• build: Sync description, repository, license fields (7fa7a85)
• build: Sync keywords with final package.json (a1397a1)