How to access element from nested child component

Question

I am trying to access elements inside a child element from parent like the following example code:

@Component({
    selector: 'parent',
    template: `<child></child>`
})
export class Parent implements AfterContentInit, AfterViewInit {
    @ViewChildren('element') viewChildren: QueryList<ElementRef>
    @ContentChildren('element', {descendants: true}) contentChildren: QueryList<ElementRef>

    ngAfterContentInit() {
        console.log(this.contentChildren)
    }

    ngAfterViewInit() {
        console.log(this.viewChildren)
    }
}
@Component({
    selector: 'child',
    template: `
        <div #element>Div1</div>
        <div>Div2</div>
        <div #element>Div3</div>
    `
})
export class Child {}

My actual results are empty arrays, but i would expect an array with Div1 and Div3. What am i doing wrong?

UPDATE

My real problem is:
I have a component that knows when to append/remove a css class in some elements. This elements may be in its own component or its child, grandchild and so its on. In other words, what i am trying to accomplish is a angular way to do the following line:

let elements = document.querySelectorAll("div[element]")

Answer 1

Let me explain @ViewChildren first; it means that you have a child component in the HTML template and you wanna reach it in the component.ts file. For instance:

<child #nested> </child>

So, you will be able now to reach this component selector is the ts file using nested element name; like this:

@ViewChildren(‘nested’) child: Child;

You can make the same declaration for the required elements in the child component, like this:

@ViewChildren(‘element1’) element1: ElementRef;

And now it will be defined in the child and you can reach it from childvariable:

this.child.element1

And so on.

BTW, I don’t know if you can use one ref for more than element. But that should work.