CODEWITHSUNDEEP
javascriptnativescriptangular2-nativescript
Abderrahman Hilali
Abderrahman Hilali

Reputation: 221

how to hide tabitems in nativescript (angular) conditionaly?

what is the recommended way to hide tabViewItems in a nativescript angular application.

I tried the ngIf directive combined wuth the ng-template but it seemed that it is not fully supported.

here is the code I am using

<TabView [selectedIndex]="auth.user ? 2 : 4" class="tab-view" sdkExampleTitle sdkToggleNavButton>
      <!--shown when logged in-->
      <ng-template [ngIf]="auth.user">
        <!--notifications tabs-->
        <StackLayout *tabItem="{title: 'notifications', iconSource: 'res://ic_action_home'}">
          <Label text="NativeScript" class="m-15 h2 text-left" color="blue"></Label>
          <ScrollView>
            <Label text="content" textWrap="true" class="m-15"></Label>
          </ScrollView>
        </StackLayout>
        <!--messages tabs-->
        <StackLayout *tabItem="{title: 'Messages', iconSource: 'res://ic_action_home'}">
          <Label text="NativeScript" class="m-15 h2 text-left" color="blue"></Label>
          <ScrollView>
            <Label text="content" textWrap="true" class="m-15"></Label>
          </ScrollView>
        </StackLayout>
      </ng-template>
      <StackLayout *tabItem="{title: 'People', iconSource: 'res://ic_action_home'}">
        <Label text="NativeScript" class="m-15 h2 text-left" color="blue"></Label>
        <ScrollView>
          <Label text="content" textWrap="true" class="m-15"></Label>
        </ScrollView>
      </StackLayout>
      <StackLayout *tabItem="{title: 'Home', iconSource: 'res://ic_action_home'}">
        <RadListView [items]="announcementService.announcements" loadOnDemandMode="Auto" class="list-group">
          <ListViewLinearLayout tkListViewLayout scrollDirection="Vertical" itemInsertAnimation="Slide" itemDeleteAnimation="Default">
            <ng-template tkListItemTemplate let-item="item">
              <GridLayout class="list-group-item" rows="*" columns="auto, *">
                <Image row="0" col="0" decodeWidth="60" decodeHeight="60" loadMode="async" src="res://icon" class="thumb img-rounded"></Image>
                <StackLayout row="0" col="1">
                  <Label [text]="item.title" textWrap="true" class="list-group-item-heading"></Label>
                  <Label class="list-group-item-text" [text]="item.createdAt | amTimeAgo"></Label>
                </StackLayout>
              </GridLayout>
            </ng-template>
          </ListViewLinearLayout>
        </RadListView>
      </StackLayout>
    </TabView>

when using the ng-template with ngIf, it works for the first time but after reloading the application it does not work anymore.

I tried [visibility] = "..condition.. ? 'visible': 'collapse'", and it did not work .

I am doing something wrong ?

Upvotes: 0

Views: 393

Answers (1)

HannesT117
HannesT117

Reputation: 141

Something like this could work:

<ng-container *ngIf="isLoggedIn()">
  <StackLayout>
    // ...
  </StackLayout>
</ng-container>

Upvotes: 1

Related Questions