Accessing `selector` from within an Angular 2 component

angular angular2-directives angular2-components angular2-decorators
Juan Mendes picture Juan Mendes · May 12, 2016 · Viewed 11.6k times · Source

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

Answer

Anton Poznyakovskiy picture Anton Poznyakovskiy · Mar 3, 2017

Use ElementRef:

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

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

Related questions

Generic type 'Array<T>' requires 1 type argument(s). - Angular2

I have been trying to implement a simple ngFor with Angular2 but I don't know what went wrong which lead to error 'Generic TYpe Array requires one argument(s). PLease favour import { Component } from '@angular/core'; @Component({ selector: 'my-app', …

Read More
How to pass object from one component to another in Angular 2?

I have Angular components and first component uses the second one as a directive. They should share the same model object, which is initialized in the first component. How can I pass that model to the second component?

Read More
Angular 2 Scroll to top on Route Change

In my Angular 2 app when I scroll down a page and click the link at the bottom of the page, it does change the route and takes me the next page but it doesn't scroll to the top of the …

Read More