CODEWITHSUNDEEP
nativescriptnativescript-angular
SwaX
SwaX

Reputation: 97

How do I show through *ngIf

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="&#xf130;" 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?

Upvotes: 0

Views: 219

Answers (2)

Manoj
Manoj

Reputation: 21908

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.

Upvotes: 0

Ashwin Bhamare
Ashwin Bhamare

Reputation: 435

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

Upvotes: 1

Related Questions