How to get the parent DOM element reference of an angular2 component

Question

I need to access to some properties of the parent DOM element which contains the component from where i want to get the info, is there a way to do such thing?

Here is how my component looks like:

import { Component, Input } from "@angular/core";

import "./loadingSpinner.component.css!";

    @Component({
        selector: "loading-spinner",
        template: `
            <div *ngIf="showSpinner" class="loader-directive-wrapper">
                <div class="loader"></div>
            </div>`
    })
    export class LoadingSpinnerComponent {
        @Input() public showSpinner: boolean = false;
    }

I need to have access to the parent DOM element, not the parent component, i need to know some parent DOM properties like width or height — Sebastian Hernandez, Dec 22 '16 at 15:13

score 30 · Accepted Answer · answered Dec 22 '16 at 15:20

30

constructor(elementRef:ElementRef) {
  elementRef.nativeElement.parentElement....
}

answered Dec 22 '16 at 15:20

Günter Zöchbauer

623,577
216
2,003
1,567

1

Could you explain this a bit? Preferably with an example ? Why are there trailing dots in the last ? Which object/variable is the child able to use now ? Is this to be added in child or parent component? – Rohit Kumar Oct 12 '20 at 13:22
1

The parent dots are your custom code This code is the child element. `elementRef` points to "self" and "elementRef.nativeElement.parentElement" points to the parent element. If you want to access the component instead of the element then you need to inject the component. https://angular.io/guide/dependency-injection-navtree#find-a-parent-component-of-known-type – Günter Zöchbauer Oct 12 '20 at 16:32

score 4 · Answer 2 · answered Dec 21 '16 at 23:31

4

In your child component pass parent in constructor:

  constructor(
    private parent: ParentComponent,
    ...
  )

  ngAfterViewInit() {
    console.log(this.parent);
  }

answered Dec 21 '16 at 23:31

Tukkan

1,574
2
18
33

1

Thanks Tukkan, but i need to access the parent DOM element not the component, i guess i formulated the question wrong. – Sebastian Hernandez Dec 22 '16 at 15:14

score 2 · Answer 3 · answered Dec 22 '16 at 00:15

2

The child component shouldn't update properties on the parent. Instead have the child emit events and the parent change the properties. The docs have an example in the Component Interaction section.

answered Dec 22 '16 at 00:15

JayChase

11,174
2
43
52

score 0 · Answer 4 · answered Dec 22 '16 at 00:59

for accessing values of parent you can use @input. for changing parent values try this example

child component

import { Component, EventEmitter, Input, Output } from '@angular/core';

@Component({
  selector: 'rio-counter',
  templateUrl: 'app/counter.component.html'
})
export class CounterComponent {
  @Input()  count = 0;
  @Output() result = new EventEmitter<number>();

  increment() {
    this.count++;
    this.result.emit(this.count);
  }
}

child html part

<div>
  <p>Count: {{ count }}</p>
  <button (click)="increment()">Increment</button>
</div>

parent component

import { Component } from '@angular/core';

@Component({
  selector: 'rio-app',
  templateUrl: 'app/app.component.html'
})
export class AppComponent {
  num = 0;
  parentCount = 0;

  assignparentcount(val: number) {
    this.parentCount = val;
  }
}

parent html part

<div>
  Parent Num: {{ num }}<br>
  Parent Count: {{ parentCount }}
  <rio-counter [count]="num" (result)="assignparentcount($event)">
  </rio-counter>
</div>

score 0 · Answer 5 · answered Nov 04 '20 at 08:13

0

If you want to get data from the parent component, you may want to review data exchange methods between components. It seems to me that you may want to take a look at the Input decorator. You can do something like: <app-spinner show="true"></app-spinner> Or <app-spinner show="isBusy()"></app-spinner>

Take a look at it here: https://angular.io/guide/inputs-outputs

answered Nov 04 '20 at 08:13

Andrew Kim

1
1

I think that what the question is asking is the exact opposite, something that uses ```@Output``` and listens for it in the parent. – Gianmarco Nov 04 '20 at 09:43

How to get the parent DOM element reference of an angular2 component

5 Answers5

Linked