Skip to main content
Post Undeleted by David Alsh
added 1699 characters in body
Source Link
David Alsh
  • 7.4k
  • 8
  • 41
  • 74

Use ElementRef

Wait misunderstood questionYou can use ElementRef to access the current component reference, allowing you to query it for nested elements. Rewriting

getElementsByTagName, querySelectorAll, and getElementsByClassName will look down into the nested elements as they operate by inspecting what's rendered in the DOM, ignoring any encapsulation Angular does.

I am not sure if there is an Angular specific way to do it, but using vanilla JS lets you get there.


Child Component

import { Component, OnInit } from "@angular/core"

@Component({
    selector: 'app-demo-child'
    template: `
        <h1> demo text </h1>
        <h1 class="test"> demo text2 </h1>
        <h1> demo text3 </h1>
    `
})
export class AppChildComponent {
}

Parent Component

import { Component, OnInit, ElementRef } from "@angular/core"

@Component({
    selector: 'app-demo-parent'
    template: `
        <app-demo-child></app-demo-child>
    `
})
export class AppParentComponent {
    constructor(
        private elRef:ElementRef
    ) {  }

    doStuff() {
        let HeaderElsTag = this.elRef.nativeElement.getElementsByTagName('h1') // Array with 3 h3 elements
        let HeaderElsQuer = this.elRef.nativeElement.querySelectorAll('h1') // Array with 3 h3 elements
        let HeaderElsClass = this.elRef.nativeElement.getElementsByClassName('test') // Array with 1 h3 element
    }
}

Warning, this will look indiscriminately within your component, so be careful that you don't have nested elements with the same class name otherwise you'll have some hard to debug side effects

Wait misunderstood question. Rewriting.

Use ElementRef

You can use ElementRef to access the current component reference, allowing you to query it for nested elements.

getElementsByTagName, querySelectorAll, and getElementsByClassName will look down into the nested elements as they operate by inspecting what's rendered in the DOM, ignoring any encapsulation Angular does.

I am not sure if there is an Angular specific way to do it, but using vanilla JS lets you get there.


Child Component

import { Component, OnInit } from "@angular/core"

@Component({
    selector: 'app-demo-child'
    template: `
        <h1> demo text </h1>
        <h1 class="test"> demo text2 </h1>
        <h1> demo text3 </h1>
    `
})
export class AppChildComponent {
}

Parent Component

import { Component, OnInit, ElementRef } from "@angular/core"

@Component({
    selector: 'app-demo-parent'
    template: `
        <app-demo-child></app-demo-child>
    `
})
export class AppParentComponent {
    constructor(
        private elRef:ElementRef
    ) {  }

    doStuff() {
        let HeaderElsTag = this.elRef.nativeElement.getElementsByTagName('h1') // Array with 3 h3 elements
        let HeaderElsQuer = this.elRef.nativeElement.querySelectorAll('h1') // Array with 3 h3 elements
        let HeaderElsClass = this.elRef.nativeElement.getElementsByClassName('test') // Array with 1 h3 element
    }
}

Warning, this will look indiscriminately within your component, so be careful that you don't have nested elements with the same class name otherwise you'll have some hard to debug side effects

Post Deleted by David Alsh
Source Link
David Alsh
  • 7.4k
  • 8
  • 41
  • 74

Wait misunderstood question. Rewriting.