How to get the Stacklayout id programatically in nativescript

Question

I'm new to this nativescript.I don't know how to get the stacklayout id properly.I'm working on Angular2 with typescript. I tried below code. I'm getting this below issue in command prompt.

JS:Error TypeError : Cannot set property 'visiblility' of undefined  Context[object Object]

Html:

<StackLayout #target visibility="collapse" id ="stackLayout"> .....  </StackLayout> 

On Clicking on the button, I need to show the visibility of stacklayout as visible programatically.

Typescript:

public stackLayout:StackLayout;

onTap(args: EventData) {

    this.animate();
}

public animate() {

   this.stackLayout.visibility = "visible" ; 
}

Answer 1

While you can access the StackLayout programmatically (Google @ViewChild), it's probably easier to restructure your code a bit (I'm leaving out the irrelevant parts):

HTML:

<StackLayout (tap)="stackTapped()" [visibility]="stackVisible ? 'visible' : 'collapsed'"></StackLayout>

or:

<StackLayout (tap)="stackTapped()" *ngIf="stackVisible"></StackLayout>

Component:

stackVisible = false;

stackTapped(): void {
  this.stackVisible = true;
}