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

Question

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.

Answer 1

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].