angularangular2-directivesangular2-componentsangular2-decorators

Accessing `selector` from within an Angular 2 component


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


Solution

  • Use ElementRef:

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