Accessing `selector` from within an Angular 2 component

Question

I'm trying to figure out how I can access the selector that we pass into the @Component decorator.

For example

@Component({
  selector: 'my-component'
})
class MyComponent {
  constructor() {
     // I was hoping for something like the following but it doesn't exist
     this.component.selector // my-component
  }
}

Ultimately, I would like to use this to create a directive that automatically adds an attribute data-tag-name="{this.component.selector}" so that I can use Selenium queries to reliably find my angular elements by their selector.

I am not using protractor

luiscla27 · Accepted Answer · 2021-02-10 22:21:46Z

38

Use ElementRef:

import { Component, ElementRef } from '@angular/core'

@Component({
  selector: 'my-component'
})
export class MyComponent {
  constructor(elem: ElementRef) {
    const tagName = elem.nativeElement.tagName.toLowerCase();
  }
}

edited Feb 10, 2021 at 22:21

luiscla27

6,5542 gold badges47 silver badges56 bronze badges

answered Mar 3, 2017 at 13:09

Anton Poznyakovskiy

2,1691 gold badge20 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ruan Mendes Over a year ago

This probably is the only way to do it now. The older (now broken) way was better since it didn't require adding an injection and it would be accessible without requiring an instance, which I use when writing end to end tests to minimize duplication.

Valerij Dobler · Accepted Answer · 2023-09-29 20:00:25Z

14

Since Angualr v14.1 you can do this:

import { reflectComponentType } from '@angular/core';

@Component({
  selector: 'my-component'
})
class MyComponent {
  constructor() {
     const metadata = reflectComponentType(MyComponent);
     const selector = metadata.selector // my-component
  }
}

edited Sep 29, 2023 at 20:00

Valerij Dobler

2,9251 gold badge22 silver badges34 bronze badges

answered Mar 9, 2023 at 16:09

Dmitry Efimenko

11.2k7 gold badges65 silver badges85 bronze badges

Comments

luiscla27 · Accepted Answer · 2021-02-11 09:08:52Z

9

OUTDATED See https://stackoverflow.com/a/42579760/227299

You need to get the metadata associated with your component:

Important Note Annotations get stripped out when you run the AOT compiler rendering this solution invalid if you are pre compiling templates

@Component({
  selector: 'my-component'
})
class MyComponent {
  constructor() {
    // Access `MyComponent` without relying on its name
    var annotations = Reflect.getMetadata('annotations', this.constructor);
    var componentMetadata = annotations.find(annotation => {
      return (annotation instanceof ComponentMetadata);
    });
    var selector = componentMetadata.selector // my-component
  }
}

edited Feb 11, 2021 at 9:08

luiscla27

6,5542 gold badges47 silver badges56 bronze badges

answered May 12, 2016 at 13:25

Thierry Templier

203k44 gold badges407 silver badges365 bronze badges

4 Comments

Ruan Mendes Over a year ago

This looks promising, how is Reflect.getMetadata able to know that it's supposed to look for metadata for MyComponent if we're not telling it anything? I'm currently getting an error when I call Reflect.getMetadata('annotations'); The error is

Reflect.getMetadata('annotations') VM61 angular2.sfx.dev.js:2652 Uncaught TypeError(…)getMetadata @  Reflect.getMetadata('annotations', this, 'annotations')

It looks like it needs two extra parameters

Ruan Mendes Over a year ago

Fixed your answer by passing this.constructor as the second argument.

Neoheurist Over a year ago

Please qualify this answer with the version of Angular 2 to which it applies - as of release 2.3.0 this seems to be out-of-date

noelm Over a year ago

github.com/angular/angular/issues/13495#issuecomment-267314384 :-(

Drew Payment · Accepted Answer · 2021-07-21 03:50:28Z

8

Here's an alternative if you need the selector name without access to the component's ElementRef:

const components = [MyComponent];

for (const component of components) {
  const selector = component.ɵcmp.selectors[0][0];
  console.log(selector);
}

Honestly, this first method feels rather hacky and who knows if this ɵ is supposed to just be for internal use? I thought I'd include it so that maybe someone could shed some light on it?

So, this is probably a safer route:

constructor(private factory: ComponentFactoryResolver) {
  const components = [MyComponent];

  for (const component of components) {
    const { selector } = this.factory.resolveComponentFactory(component);
    console.log(selector);
  }
}

answered Jul 21, 2021 at 3:50

Drew Payment

811 silver badge2 bronze badges

3 Comments

Ruan Mendes Over a year ago

The first solution depends on internal/private values. However, the second solution looks solid.

maxime1992 Over a year ago

Second option is definitely the most solid option I've seen so far. Thanks for pointing that out drew

UKnoHowWeDo Over a year ago

ComponentFactoryResolver is deprecated as of Angular v13. Which is a shame because I'm working with Angular elements and I could've used this to define the custom element in the AppModule constructor, so I can't inject the ViewContainerRef.

Collectives™ on Stack Overflow

Accessing `selector` from within an Angular 2 component

4 Answers 4

1 Comment

Comments

4 Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related