Using @ViewChild to select an element by Class name?

Question

In this article Create Advanced Component the author selects an element by first creating a directive:

@Directive({
  selector: '.tooltip-container'
})
export class TooltipContainerDirective {}

And then using that directive to select the element containing the class .tooltip-container like this:

    @Component({
    template: `
        <div class="tooltip-container" [ngStyle]="{top: top}">
        <ng-content></ng-content>
        </div>
    `,
    styles: [...]
    })
    export class TooltipComponent implements OnInit {
    top : string;
    @ViewChild(TooltipContainerDirective, { read: ElementRef }) private tooltipContainer;


    }

Does Angular have the ability to select the tooltipContainer element by class name without using the directive?

No, you can't select by CSS selectors with any of the query features. — Reactgular, Jun 11 '19 at 16:33
@Reactgular of course you can: https://angular.io/guide/cheatsheet => Directive configuration — Nickolaus, Jun 11 '19 at 16:39
As @Nickolaus realized the author uses the directive to make the `tooltipContainer` available in `ngOnInit` instead of `ngAfterViewInit`. Interesting and subtle distinction. — Ole, Jun 11 '19 at 19:13
`document.getElementsByClassName('tooltip-container')` will do the job. — Pierre, May 10 '22 at 08:15

Nickolaus · Accepted Answer · 2019-06-11T16:41:09.187

10

Hi I think your code should work,...
btw. you can use the ViewChild-Selector like a CSS-Selector (so @ViewChild('.tooltip-container') should work as well (notice: @ViewChild will only return the first result).
Furthermore you can use #myId on any HTML-Element and then select the child by using @VievChild('myId')

But I do not think that is your problem, is it possible your are trying to access the ViewChild in ngOnInit?, because that won't work... the child will be available as the view is rendered therefore the first time you can access the child is ngAfterViewInit.

edited Jun 11 '19 at 16:41

answered Jun 11 '19 at 16:35

Nickolaus

4,785
4
38
60

AHA! Yes good hunch. The tutorial author is accessing the `tooltipContainer` in `ngOnInit`, which is probably why he's using the `tooltip-container` directive to grab the `tooltipContainer ElementRef`. – Ole Jun 11 '19 at 19:11
1

Created a `
` inside a component, then added the view child ` @ViewChild('.test') testRef;` but i recieve the value as undefined
– Ignacio Ambía Feb 17 '22 at 18:50
@ViewChild is not working directly with css selectors like classes and ids. But you can get around it via directives or you can just use plain JS `querySelector`s if you do not want to overcomplicate things. – Eugene P. Mar 25 '22 at 11:52

Using @ViewChild to select an element by Class name?

1 Answers1