SegmentedBar issue

app.component.ts

import {Component, AfterViewInit, OnInit, ViewChild, ElementRef} from "@angular/core";
import {TabsComponent} from "./components/tabs/tabs.component";
import {HTTP_PROVIDERS, Http} from '@angular/http';
import {ROUTER_DIRECTIVES, Router} from '@angular/router';
import {NS_ROUTER_DIRECTIVES} from 'nativescript-angular/router';
import {Measurement} from "./shared/measurement";
import { TodoService } from './shared/airchange.service';

import {SegmentedBar, SegmentedBarItem, SelectedIndexChangedEventData} from 'ui/segmented-bar';


@Component({
    selector: 'my-app',
    //directives: [ROUTER_DIRECTIVES, NS_ROUTER_DIRECTIVES, TabsComponent],
    //providers: [HTTP_PROVIDERS, TodoService],
    template: `
<ActionBar title="Calculator" class="ui-action-bar">
     <ActionItem tap="onShare"
      ios.systemIcon="9" ios.position="right"
      android.systemIcon="ic_menu_share" android.position="actionBar"></ActionItem>
</ActionBar>
<StackLayout>
            <StackLayout class="ui-nav">
                <SegmentedBar #tabs [items]="items" [selectedIndex]="selectedIndex"></SegmentedBar>
            </StackLayout>
      

  <StackLayout class="o-section o-section--edge-padding" orientation="vertical" visibility="{{ selectedIndex == 1 ? 'visible' : 'collapse' }}">

    <Label text="Home" class="ui-dia-section__title"></Label>

    <Label [text]="selectedIndex" class="ui-dia-section__title"></Label>
    <Label text="{{selectedIndex}}" class="ui-dia-section__title"></Label>
  </StackLayout>

  <StackLayout class="o-section o-section--edge-padding" orientation="vertical" visibility="{{ selectedIndex == 0 ? 'visible' : 'collapse' }}">
    <Label text="Glossary" class="ui-dia-section__title"></Label>
    <Label [text]="selectedIndex" class="ui-dia-section__title"></Label>

  </StackLayout>
</StackLayout>
    `})

export class AppComponent {
    selectedIndex: number;
    items: Array<any>;
    showHomeScreen: boolean = true;
    showGlossaryScreen: boolean = false;

      @ViewChild("tabs") tabs: ElementRef;
    constructor() {

        this.selectedIndex = 0;
        this.items = [{ title: 'Calculator' }, { title: 'Glossary' }];
    }

    ngAfterViewInit() {
        this.tabs.nativeElement.on(SegmentedBar.selectedIndexChangedEvent, (args: SelectedIndexChangedEventData) => {
            switch (args.newIndex) {
                case 0:
                    console.log('first selected, selectedIndex: ' + this.selectedIndex);
                    //this.router.navigateByUrl("home");
                    this.selectedIndex = 0;
                    break;
                case 1:
                    console.log('second selected, selectedIndex: ' + this.selectedIndex);
                   // this.router.navigateByUrl("glossary");
                    this.selectedIndex = 1;
                    
                    break;
                case 3:
                    console.log('third selected')
                    break;
            }
        })
    }
    ngOnInit(){
        console.log('ngOnInit, index: ' + this.selectedIndex);

    }
}