README
NgxUid - Angular Unique Ids
A simple Angular 4+ service and directive to generate and bind unique ids to HTML elements.
This can be of particular use for assigning ids when dynamically generating elements such as when using the Angular ngFor
directive.
Usage
1. Install the library:
npm install --save ngx-uid
NgxUidModule
in your module:
2. Import the import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxUidModule } from 'ngx-uid';
import { AppComponent } from './app.component';
@NgModule({
imports: [
BrowserModule,
NgxUidModule.forRoot() // <-- use `forRoot` in your app root module
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class MyModule {}
NgxUidDirective
(ngxUid
) or NgxUidService
in your component:
3. Use the import { Component } from '@angular/core';
import { NgxUidService } from 'ngx-uid';
@Component({
selector: 'app-component',
template: `
<!-- using the directive -->
<input ngxUid #inputId1="ngxUid" type="checkbox">
<label [for]="inputId1">Check 1</label>
<!-- using the service -->
<input [id]="inputId2" type="checkbox">
<label [for]="inputId2">Check 1</label>
`
})
export class AppComponent {
constructor(private uidService: NgxUidService) { }
inputId2 = this.uidService.next();
}
You may also use the NgxUidNoBindDirective
(ngxUidNoBind
) to create a unique id in the template without automatically
binding it to the host element's id.
<!-- directive no binding -->
<div id="notBound" #myDiv ngxUidNoBind #myId="ngxUidNoBind">
<div>Here is the div id: {{myDiv.id}}</div>
<div>Here is what a unique id looks like: {{myId}}</div>
</div>
NgxUidService
:
4. (Optional) Configure the The default NgxUidService
provides simple incrementing id values.
If you wish, you may define your own unique id factory by implementing the NgxUidService
interface, such as to provide a universally unique id:
import { v4 as uuid } from 'uuid';
import { NgxUidService } from 'ngx-uid';
export class MyIdFactory implements NgxUidService {
next() { return uuid(); }
}
Then either (1) configure a factory instance when importing the NgxUidModule
module
@NgModule({
imports: [
NgxUidModule.forRoot({
idFactory: new MyIdFactory() // <-- (1)
})
],
// ...
})
export class MyModule {}
or (2) set up your own provider for NgxUidService
.
@NgModule({
providers: [
{ // <-- (2)
provide: NgxUidService,
useClass: MyIdFactory
}
],
// ...
})
export class MyModule {}
See the demo source for an example application.
Development
Clone
git clone https://github.com/brandonherzog/ngx-uid.git
cd ngx-uid
npm install
npm start
Tasks
npm start
to run a live-reload server with the demo appnpm run test
to test in watch mode, ornpm run test:once
to only run oncenpm run build
to build the librarynpm run lint
to lintnpm run clean
to cleannpm install ./relative/path/to/lib
afternpm run build
to test locally in another app
License
Thanks
Thanks to the Angular QuickStart Library for the boilerplate.