CODEWITHSUNDEEP
typescriptangularnativescript
kenkulan
kenkulan

Reputation: 147

NativeScript + Angular2 - SegmentedBar binding

I've been experiencing this error for hours. When I run the app, the IOS simulator shows only a white page, nothing seems to be loaded. I couldn't figure out what's wrong. I want to make a page with segmented bar. Here is my 'menu.component.ts' file code: 

import {Observable} from 'data/observable';
import {Component} from "@angular/core";

@Component({
  selector: "menu",
  templateUrl: "./components/menu/menu.html",
})

export class MenuComponent extends Observable {
  public selectedItem: string;
  public items: Array<any> = [
   { title: 'Home' },
   { title: 'G+'   },
   { title: 'Sync' }
  ];

  constructor() {
   super();
   this.selectedItem = `Selected: ${this.items[0].title}`;
}

public selectSegment(e: any) {
  this.set('selectedItem', `Selected: ${this.items[e.newIndex].title}`);
  }
}

and my 'menu.html' file:

<SegmentedBar items="{{items}}" selectedIndexChanged="{{selectSegment}}" ></SegmentedBar>
<Label text="{{selectedItem}}" ></Label>

Upvotes: 1

Views: 938

Answers (1)

Nick Iliev
Nick Iliev

Reputation: 9670

The code below is from http://www.nativescriptsnacks.com/snippets/2016/06/22/angular-segmentedbar.html with minor changes.

Overall you are using the NativeScript Core binding syntax instead of nativeScript+Angular-2 binding model which should look like this.

<SegmentedBar #tabs [items]="items" [selectedIndex]="selectSegment"></SegmentedBar>

More about data-binding in NativeScript+Angular-2 here

// #tabs is the way to provide an Id for your component (equal to id="tabs")

Here is a working example from nativescriptsnacks.com (some minor changes from the original code)

    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<any>;

        @ViewChild("tabs") tabs: ElementRef; // equal to getViewById() in NativeScript core

        constructor(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 2:
                        console.log('third selected')
                        break;
                }
            })
        }
        ngOnDestroy() { }
    }

Upvotes: 2

Related Questions