How to get reference of the component associated with ElementRef in Angular 2

You should know the following things about using @ViewChild property decorator.

It uses the following Metadata Properties:

• selector – the directive type or the name used for querying.
• read – read a different token from the queried elements.

From source code:

export interface ViewChildDecorator {
  /**
   * You can use ViewChild to get the first element or the directive matching 
   * the selector from the
   * view DOM. If the view DOM changes, and a new child matches the selector,
   * the property will be updated.
   *
   * View queries are set before the `ngAfterViewInit` callback is called.
   *
   * **Metadata Properties**:
   *
   * * **selector** - the directive type or the name used for querying.
   * * **read** - read a different token from the queried elements.
   */
  (selector: Type<any>|Function|string, {read}?: {read?: any}): any;
  new (selector: Type<any>|Function|string, {read}?: {read?: any}): ViewChild;
}

If you don’t provide the read parameter, @ViewChild() will return the:

• component instance if there is.
• ElementRef instance if there is no component applied
• different token from the queried elements if you set read property

So if you want to get ElementRef from the child that is angular2 component (VerticeControlComponent) you need to explicitely tell using read: ElementRef:

@ViewChild('scaleControl', {read: ElementRef}) scaleControl: ElementRef;

And then inside ngAfterViewInit hook or later you can write this.scaleControl.nativeElement to get DOM element.

Update

I wrote early:

• different token from the queried elements if you set read property

Now I want to add what exactly we can read:

• ElementRef

• TemplateRef

• ViewContainerRef

• Provider

What does Provider mean here?

It means that if we defined any provider(in component or directive) on specific element then we can read it.

@Component({
  selector: 'child',
  template: `
   <h2>I'm child</h2>
  `,
  providers: [
    {
      provide: 'test', useValue: 'x'
    }
  ]
})
export class ChildComponent {

}

So in consumer of this component we can write

@ViewChild(ChildComponent, { read: 'test' }) providerToken: string;

to get value x.

Example

See also:

• What are all the valid selectors for ViewChild and ContentChild?