How to access the parent HTML element from a component?

Question

As in the question - I have a child component, and I would like to know what the width of the parent element is. How can i do this?

Answer 1

Enter the element itself:

constructor(private elRef: ElementRef){}

access parent elements:

ngOnInit() {
  console.log(this.elRef.nativeElement.parentElement);
}

Answer 2

The Angular2 manual contains an entire chapter on component relationships to describe such scenarios. https://angular.io/docs/ts/latest/cookbook/component-communication.html

Answer 3

You can access the nearest parent DOM element by looking at this.elRef.closestsome selectors corresponding to this parent element.

constructor(private elRef: ElementRef){}

ngOnInit() {
   const parentElement = this.elRef.closest('.parent-element-class')
}