How to access components unique encapsulation ID in Angular 9
angular, angular2viewencapsulation, angular9, javascript
Solution
The unique ID in Angular 9 can be represented as:
_nghost - par - 2
| | |
static APP_ID componentDef.id
In order to access `componentDef.id` you can do the following:
export class SomeComponent implements OnInit {
unique = this.constructor['ɵcmp'].id;
where `ɵcmp` is a private variable NG_COMP_DEF
Ng-run Example
Problem
I'm trying to encapsulate my element ids by adding the instance id like this: ``` <label for="id-{{ unique }}-name"></label> <input id="id-{{ unique }}-name" type="text" formControlName="name"> ``` I previously worked with this: https://stackoverflow.com/a/40140762/12858538. But after upgrading Angular from 7 to 9 this seems deprecated. I was thinking about a simple helper service, which would generate unique ids for my app. Something like this: ``` @Injectable() export class UniqueIdService { private counter = 0 constructor() {} public getUniqueId (prefix: string) { const id = ++this.counter return prefix + id } } ``` inspired by lodash uniqueid But I did rather use angulars build in ids. So my currently solution is to extract the id from the components `_nghost` attribute. ``` constructor ( private element: ElementRef, ) { const ngHost = Object.values(this.element.nativeElement.attributes as NamedNodeMap) .find(attr => attr.name.startsWith('_nghost')) .name this.unique = ngHost.substr(ngHost.lastIndexOf('-') + 1) } ``` But I'm not perfectly happy with this solution and I'm looking for a direct access to the id. Does anyone know how to access this?