References not working on component selector?

Question

<my-selector #myRef class="element"></my-selector>

and in TS

@ViewChild('myRef') myRef: ElementRef;

accessing #myRef in its parent component like this.myRef is not giving DOM and it is giving the class and its property members.

We can style even it is not HTML element but Why can't we get it as DOM element rather component class?

Why references are not working on component selector?

`read: ElementRef` should help you. See also https://stackoverflow.com/questions/39908967/how-to-get-reference-of-the-component-associated-with-elementref-in-angular-2 — yurzui, Feb 14 '18 at 20:30

ConnorsFan · Accepted Answer · 2018-02-14T20:27:19.630

As mentioned in Angular documentation:

A template reference variable is often a reference to a DOM element within a template. It can also be a reference to an Angular component or directive or a web component.

In the following case, the template variable myRef refers to the component instance:

<my-selector #myRef class="element"></my-selector>

@ViewChild("myRef") myComponent: MyComponent;

If you make the component HTML element available as a public property:

@Component({
    selector: "my-selector",
    ...
})
export class MyComponent {

    constructor(private elementRef: ElementRef) { }

    public get domElement(): HTMLElement {
        return this.elementRef.nativeElement;
    }

    public doSomething() {
        ...
    }
}

you will have access to it as well as to other public members of the component:

export class ParentComponent {

    @ViewChild("myRef") myComponent: MyComponent;

    private someMethod() {
        let myComponentId = this.myComponent.domElement.id;
        ...
        this.myComponent.doSomething();
        ...
    }
}

References not working on component selector?

1 Answers1