@aloreljs/ngx-auto-id
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.0 • Public • Published

    ngx-auto-id

    Automatic ID generator for Angular

    Build Status Coverage Status Greenkeeper badge


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

    Install

    npm i @aloreljs/ngx-auto-id

    DownloadsWeekly Downloads

    15

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    85.8 kB

    Total Files

    31

    Last publish

    Collaborators

    • alorel