How can I access an "ion-content" element that's inside a component?

Hey folks,

I have a problem and I was looking for a solution all day long, but I’ve given up. Hopefully you might have a solution…

Let’s say - I have a component A. The template and the css are also included inside the component code - containing an <ion-content #scroller>....</ion-content> element.

My question: How can I access this “ion-content” element from my regular page via “ViewChild”? I would like to perform some scroll actions, but it’s not working and I really tried almonst everything. :frowning

Thanks,
Oliver

I must be misunderstanding something, because it looks to me like that exact situation is described in the Content docs.

This example shows only how to get the reference for the <ion-content /> on the same page. The component I would like to access is on a template of the components component… It’s a add-on component with it’s own template.

Hi odorakel,

You probably already figured out a solution to your problem.

For those still interested, I needed exactly the same thing and here’s how I did it:

Parent

<!-- parent.html (the one defining <ion-content> tag) -->
<ion-content #scroller>
  <child [scroller]="scroller"></child>
</ion-content>

Child

/* child.ts (the one using ion-content reference) */
import { Component, Input } from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: 'child.html',
})
export class ChildComponent {
  @Input() public scroller: any; // <== Gives you access to ion-content (via ref scroller)
  [...]
}

Hope this helps.

Cheers,
Lucas

5 Likes