How do I show through *ngIf - nativescript

Question

I want to trigger the *ngIf function through my home.component.ts.
html
<GridLayout class="page">
<GridLayout row="0" rows="*, 2*, *">
<GridLayout width="57%" row="0" horizontalAlignment="center" verticalAlignment="center">
<button (click)="test()" text="testbutton"></button>
</GridLayout>
<GridLayout class="carousel-item-circle" row="1" horizontalAlignment="center" verticalAlignment="center">
<label class="fa carousel-item-icon" text="" textWrap="true"></label>
</GridLayout>
<GridLayout *ngIf="testi" width="49%" row="2" horizontalAlignment="center" verticalAlignment="center">
<Label class="text-color-blue opensans-regular carousel-item-desc" text="Mikrofon zum Sprechen antippen." textWrap="true"></Label>
</GridLayout>
</GridLayout>
ts
public vibrator = new Vibrate();
public testi = true;
constructor(private page: Page) {
// Use the component constructor to inject providers.
}
ngOnInit(): void {
this.page.actionBarHidden = true;
this.page.addCss(".page-content { background: #000000");
}
vibrate(){
this.vibrator.vibrate(2000);
}
test(){
this.testi = !this.testi;
}
It seems so simple but it doesnt work.
Is there something i missed?

Answer 1

You need to make the variable true/false on click
Write in Your HTML file
<button (click)="test()">Click</button>
<span *ngIf="testi">NG IF</span>
Write in Your TS file
First Declare testi as
testi = false
test(){
testi = true;
}
Using *ngIf you can show the element whenever it is true or not empty, if it is false or empty then it will not display element in browser
Hope this will solve your problem, Thanks

Answer 2

NativeScript Button uses tap not click. So in your code test() is never called.
<button (tap)="test()" text="testbutton"></button>
Refer the getting started guide and go through the available UI components to understand the core differences.