This.content undefined after hidden element is visible

Ionic Framework ionic-v3
1

I am working on scrollTo element

<ion-card>
  <img src="img/advance-card-map-madison.png">
  <ion-fab right top>
    <button ion-fab (click)="scrollToElement('firstElement')">
      <ion-icon name="pin"></ion-icon>
    </button>
  </ion-fab>
</ion-card>

<ion-card id="firstElement" [hidden]="!firstView">
  <img src="img/advance-card-map-madison.png">
  <ion-fab right top>
    <button ion-fab>
      <ion-icon name="pin"></ion-icon>
    </button>
  </ion-fab>
</ion-card>

@ViewChild(Content) content: Content;

scrollToElement(elementId){
       this.firstView = true;
        let yOffset = document.getElementById(elementId).offsetTop;
        this.content.scrollTo(0, yOffset, 2000)
    }

But in my view initially element is hidden and after element made visible “this.content.scrollTo” getting undefined

When there is no hidden condition at that time scrollTo working absolutely fine

2

you could try to pass the HtmlNode to your function instead of selecting it in the component code

<button (click)="doSomething(customElement)">do it!</div>
<ion-card #customElement [hidden]="!firstView">
  
</ion-card>

doSomething(element: HTMLDivElement) {

}

or use the ViewChild approach:

@ViewChild('customElement') customElement: ElementRef;

// customElement.nativeElement = HTMLNode

<ion-card #customElement [hidden]="!firstView">
  
</ion-card>

In general hidden should not remove the element of the dom. So this would be a strange error.

The only thing that happened if you hide it, the dom element get some additional attributes:

<ion-card ng-reflect-hidden="true" hidden><ion-card>