CODEWITHSUNDEEP
angularnativescriptangular2-nativescript
Matt Westlake
Matt Westlake

Reputation: 3651

Angular Nativescript visibility defaults to true, even when variable is initialized

Is there a way to default "hide" an element in Nativescript?

I have in my component

export class HouseholdContactComponent{
  private isLoading = true
}

and in my xml

<StackLayout [visibility]="isLoading ? 'collapse' : 'visible'">
  <Label text="Hi there"></Label>
</StackLayout>

With this code, the screen flashes the "Hi there" message and then it goes away.

Upvotes: 4

Views: 1500

Answers (2)

joshrathke
joshrathke

Reputation: 7774

Rather than using the [visibility] property, you should use the Angular *ngIf directive.

<StackLayout *ngIf="!isLoading">
    <Label text="Hi there"></Label>
</StackLayout>

On a side note, in order to bind to a attribute property and bind it to interpolation Angular is doing you need to prefix it with attr, for example you would need to write [attr.visibility] rather than just [visibility].

Upvotes: 6

rynop
rynop

Reputation: 53639

Use the *ngIf directive. It will render if the variable value is true.

Ex:

//HTML
<Button text="Show/hide block" (tap)="onTap()" class="btn btn-primary btn-active"></Button>
<GridLayout *ngIf="isVisible" class="bg-primary" borderRadius="2" height="300"></GridLayout>

//Component
...
    onTap() {
        if (this.isVisible) {
            this.isVisible = false;
        } else  {
            this.isVisible = true;
        }
    }
...

Upvotes: 0

Related Questions