6

I read some answers already here, such as this, but my problem is slightly different. I want to get component as a DOM element so that I can add/remove some CSS classes on it.

My HTML template contains component:

<sidenav-menu #sidenav class="app__sidenav"></sidenav-menu>

And my class contains a reference to it: 

@ViewChild('sidenav') sidenav: ElementRef;

But when I log this.sidenav in one of my functions, I see that it is a representation of a class of Sidenav component, not its DOM representation. Why is that happening?

TheOpti
  • 1,641
  • 3
  • 21
  • 38
  • see also [this answer](https://stackoverflow.com/a/45064618/2545680) for reference what can be passed to `{read:...}` parameter – Max Koretskyi Aug 18 '17 at 17:14

2 Answers2

8

You can specify what you want using the read parameter:

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

This way you get the ElementRef and can use this.sidenav.nativeElement like mentioned by @joshrathke

or (for other use cases)

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

My answer to the question you liked to also mentions this read parameter https://stackoverflow.com/a/35209681/217408

Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • @TheOpti glad to hear :-) – Günter Zöchbauer Aug 18 '17 at 15:50
  • Wouldn't a more "Angular-y" way to do this be using the `ngClass` directive? – DeborahK Aug 18 '17 at 20:46
  • @DeborahK I looked at the question again but I can't find information about what the actual intention was. You might be right. I just pointed out what struck me what can't work and how to fix it. – Günter Zöchbauer Aug 18 '17 at 20:49
  • 1
    @GünterZöchbauer Thanks for the info. Wasn't sure if I was just missing something. Yea ... sometimes when there is not enough info its hard to drill down to what they are really trying to do and suggest alternatives vs just answering what they are asking.. – DeborahK Aug 18 '17 at 20:52
3

Edit

In order for this to work, you need to implement @Günter Zöchbauer suggestion for extracting the component using ViewChild with read.

Original Answer

You need to use the nativeElement property of the ElementRef object. You'll find your DOM Representation there. Its also what exposes the DOM element and allows you to call traditional methods on it as if it was a DOM element in vanilla javascript or jQuery.

console.log(this.sidenav.nativeElement);
joshrathke
  • 7,564
  • 7
  • 23
  • 38