CODEWITHSUNDEEP
angulardomangular2-components
Sebastian Hernandez
Sebastian Hernandez

Reputation: 2376

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

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;
    }

Upvotes: 13

Views: 29579

Answers (5)

Andrew Kim
Andrew Kim

Reputation: 1

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

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657118

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

Upvotes: 31

Amit kumar
Amit kumar

Reputation: 6147

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>

Upvotes: 0

JayChase
JayChase

Reputation: 11525

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.

Upvotes: 2

Tukkan
Tukkan

Reputation: 1625

In your child component pass parent in constructor:

  constructor(
    private parent: ParentComponent,
    ...
  )

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

Upvotes: 4

Related Questions