Nativescript-angular: Example usage of SegmentedBar? Having trouble with the component rendering improperly with bound `items` property

[NathanWalker]

I'm having trouble getting a Segmented Bar to render properly when bound to a property in an angular component class.

<SegmentedBar items="{{supportedLanguages}}"></SegmentedBar>

...
export class LangSwitcherCmp {
  public supportedLanguages: Array<any> = [
    { code: 'en', title: 'English' },
    { code: 'es', title: 'Spanish' },
    { code: 'fr', title: 'French' },
    { code: 'ru', title: 'Russian' },
    { code: 'bg', title: 'Bulgarian' }
  ];
}

It ends up rendering like this... (am I missing something?):

[NathanWalker]

This is using the following dependencies btw:

"angular2": "2.0.0-beta.3",
"nativescript-angular": "0.0.31",
"parse5": "1.4.2",
"punycode": "1.3.2",
"querystring": "0.2.0",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"tns-core-modules": "1.6.0-angular-5",
"zone.js": "0.5.11"

Which is the latest of what is being used here:
https://github.com/NativeScript/qsf-angular-nativescript/blob/master/package.json#L33-L42

[hdeshev]

I tried this binding:

<SegmentedBar [items]="supportedLanguages"></SegmentedBar>

and it worked just fine. I think the moustache binding is meant to be used only for HTML text nodes (it returns a string value, which won't work with the segmented bar). Since NativeScript has no text nodes, I'd advise against using those bindings.

[NathanWalker]

Ah yes of course thanks!!!

[burkeholland]

I'm having trouble getting the SegmentedBar to render with a static list of items in markup. If I have...

<SegmentedBar row="1" colspan="3" class="toggles" (selectedIndexChanged)="filter()" selectedBackgroundColor="#B76769">
  <SegmentedBar.items>
    <SegmentedBarItem title="All"></SegmentedBarItem>
    <SegmentedBarItem title="Active" completed="false"></SegmentedBarItem>
    <SegmentedBarItem title="Done" completed="true"></SegmentedBarItem>
  </SegmentedBar.items>
</SegmentedBar>

...shouldn't that display a SegmentedBar? Is there a way to do it differently in Angular 2?

[hdeshev]

This syntax (binding) will work for sure:

<SegmentedBar row="1" colspan="3" class="toggles"
  (selectedIndexChanged)="filter()" selectedBackgroundColor="#B76769"
  [items]="[{title: 'All'}, {title: 'Active'}]">
</SegmentedBar>

I opened a new issue related to supporting child <SegmentedBarItem> tags.