A SegmentedBar with NativeScript and Angular 2

Osei creates a simple segmentedbar in {N} + ng2 programmatically

  •         
    import {Component, OnInit, OnDestroy, AfterViewInit, ViewChild, ElementRef} from '@angular/core';
    import {Page} from 'ui/page';
    import {SegmentedBar, SegmentedBarItem, SelectedIndexChangedEventData} from 'ui/segmented-bar';
    @Component({
        selector: 'tabs',
        template: '<SegmentedBar #tabs [items]="items" [selectedIndex]="selectedIndex"></SegmentedBar>'
    })
    export class TabsComponent implements OnInit, OnDestroy, AfterViewInit {
        selectedIndex: number;
        items: Array;
        @ViewChild("tabs") tabs: ElementRef;
        constructor(private router: Router, private page: Page) {
            this.selectedIndex = 0;
            this.items = [{ title: 'First' }, { title: 'Second' }, { title: 'Third' }];
    }
        ngOnInit() {
    
        }
        ngAfterViewInit() {
            this.tabs.nativeElement.on(SegmentedBar.selectedIndexChangedEvent, (args: SelectedIndexChangedEventData) => {
                switch (args.newIndex) {
                    case 0:
                        console.log('first selected')
                        break;
                    case 1:
                        console.log('second selected')
                        break;
                    case 3:
                        console.log('third selected')
                        break;
                }
            })
        }
        ngOnDestroy() { }
    }
    
    		</code>
          </pre>
        </div>
      </li>
        
    </ul>