0

In my app I have following structure:

<fin-header></fin-header>
<main></main>
<fin-footer></fin-footer>

In header I want to add scrolling to specific component of main. My scrolling method takes as argument elementRef. But I can't get one by @ViewChild 'cause components of main are not children of header.

Is there any chance to get elementRef of component that is not child?

Michał Frąk
  • 1
  • I would think you could use the parent element to pass the elementRef of main to header. Can you add an output property in main that is an elementRef, and an input property in header of the same type, then, in the parent, set one to be the other in AfterViewInit? – Greg Kopp Dec 21 '18 at 01:50

2 Answers2

0

Perhaps you could modify your structure a little and embed your components in a parent. Something like:

<parent>
  <fin-header [elementRef]="mainRef"></fin-header>
  <main></main>
  <fin-footer></fin-footer>
<parent>

That way the parent could pass the reference of its child (main) to its other child (header).

Dylan Watson
  • 2,283
  • 2
  • 20
  • 38
0

you can get the main elementRef and use nativeElement.parentElement to get the parent and do another query on the DOM from the parent. for example, if the structure is something like:

<div>
  <fin-header></fin-header>
  <main></main>
  <fin-footer></fin-footer>
</div>

Obtaining the main's elementRef nativeElement.parentElement would be the div. and of course, div.querySelectorAll would have all the div's children.

dK-
  • 582
  • 3
  • 12