Disable item in ListView - angular2-nativescript

Question

I have an application written in NativeScript with Angular 2. In it I have a list view like this:
<ListView row="1" [items]="items" (itemTap)="onNavigationItemTap($event)" class="root-drawer-content">
<ng-template let-item="item">
<StackLayout class="root-item-stack-layout">
<Label [text]="item.title" textWrap="true" class="btn btn-primary" [class.btn-active]="item.enabled"></Label>
<StackLayout height="1" class="root-drawer-content"></StackLayout>
</StackLayout>
</ng-template>
</ListView>
How can I force specific item to be disabled? Both visually and in terms of behavior.

Answer 1

You are almost there. As you are using item.enabled property to choose the btn-active class, you can apply the same logic to for disabled(Your custom one e.g change the background color to gray to look disabled) to StackLayout.
<ng-template let-item="item">
<StackLayout class="root-item-stack-layout" [class.enabled]="item.enabled">
<Label [text]="item.title" textWrap="true" class="btn btn-primary" [class.btn-active]="item.enabled"></Label>
<StackLayout height="1" class="root-drawer-content"></StackLayout>
</StackLayout>
</ng-template>
And for the functionality, you can handle that in your .ts file where your manage the itemTap.
(itemTap)="onNavigationItemTap($event)"
public onNavigationItemTap(args) {
const currentItemView = args.view;
const item = currentItemView.bindingContext;
if(item.enabled){
// do your stuff
}