How to access components unique encapsulation ID in Angular 9

Question

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?

Answer 1

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