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
Use ElementRef
:
import { Component, ElementRef } from '@angular/core'
@Component({
selector: 'my-component'
})
export class MyComponent {
constructor(elem: ElementRef) {
const tagName = elem.nativeElement.tagName.toLowerCase();
}
}
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
}
}