Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;
    } 
like image 283
Sebastian Hernandez Avatar asked Dec 21 '16 23:12

Sebastian Hernandez


People also ask

How do I get ElementRef from components?

So if you want to get ElementRef from the child that is angular2 component ( VerticeControlComponent ) you need to explicitely tell using read: ElementRef : @ViewChild('scaleControl', {read: ElementRef}) scaleControl: ElementRef; And then inside ngAfterViewInit hook or later you can write this. scaleControl.

How do I get the DOM element in angular 8?

We can access the DOM in Angular using different reference types like ElementRef , TemplateRef , ViewRef , ComponentRef and ViewContainerRef . These reference types can be queried from templates using @ViewChild and @ContentChild . Browser's native DOM element can be accessed via ElementRef .

What is ElementRef nativeElement?

According to the official docs. Angular ElementRef is a wrapper around a native element inside of a View. It's simply a class that wraps native DOM elements in the browser and allows you to work with the DOM by providing the nativeElement object which exposes all the methods and properties of the native elements.

What is parent in angular?

concept parent component in category angularA parent component can pass data to its child by binding the values to the child's component property. A child component has no knowledge of where the data came from. A child component can pass data to its parent (without knowing who the parent is) by emitting events.


1 Answers

constructor(elementRef:ElementRef) {
  elementRef.nativeElement.parentElement....
}
like image 196
Günter Zöchbauer Avatar answered Oct 24 '22 09:10

Günter Zöchbauer