Nativescript Angular SegmentedBar item dynamic title

Issue

I’d like to build a SegmentedBar with a dynamic title, for example: “Notes (5)” where 5 is the number of notes showed in these segment.

My problem is I’m not able to access segment title in code.
I’m generating all titles something like this:

this.pageItems = [];
let segmentedBarItem = <SegmentedBarItem>new SegmentedBarItem();
segmentedBarItem.title = 'Notes (' + order.notes.length + ')';

How can update segmentedbar item title when notes.length changes?

If I create again all segmentedBarItems the segment position changes to first segment, and I don’t want to change position, only update the title of a segment.

Regards
Jose

Solution

DO not create new segmented bar item but get the reference to the already created ones and change their title. Playground app demonstrating the above with TypeScript here.

Using Observable view model to create the bar items and the bound notes

home-view-model.ts

import { SegmentedBar, SegmentedBarItem } from "ui/segmented-bar";
import { Observable } from 'tns-core-modules/data/observable';

export class HomeViewModel extends Observable {
    private getSegmentedBarItems = () => {
        let segmentedBarItem1 = new SegmentedBarItem();
        segmentedBarItem1.title = "Notes (0)";
        let segmentedBarItem2 = new SegmentedBarItem();
        segmentedBarItem2.title = "Notes (0)";
        return [segmentedBarItem1, segmentedBarItem2];
    }

    segmentedBarItems: Array<SegmentedBarItem> = this.getSegmentedBarItems();
    selectedBarIndex: number;
    firstCounter: number;
    secondCounter: number;

    constructor() {
        super();

        this.selectedBarIndex = 0;

        this.firstCounter = 0;
        this.secondCounter = 0;
    }

    changeBarTitleOne() { 
        let segBarItemOne = this.segmentedBarItems[0];
        segBarItemOne.title = 'Notes (' + (++this.firstCounter) + ')';
    }

    changeBarTitleTwo() {
        let segBarItemOne = this.segmentedBarItems[1];
        segBarItemOne.title = 'Notes (' + (++this.secondCounter) + ')';
    }
}

home-page.ts

import { EventData } from 'tns-core-modules/data/observable';
import { StackLayout } from 'tns-core-modules/ui/layouts/stack-layout';
import { HomeViewModel } from './home-view-model';

export function pageLoaded(args: EventData) {

    let page = <StackLayout>args.object;
    page.bindingContext = new HomeViewModel();
}

home-page.xml

<Page loaded="pageLoaded" class="page" xmlns="http://www.nativescript.org/tns.xsd">
    <GridLayout rows="*, 2*, 2*">
        <SegmentedBar row="0" items="{{ segmentedBarItems }}" selectedIndex="{{ selectedBarIndex }}" />
        <Button row="1" text="Change first title" tap="{{ changeBarTitleOne }}" />
        <Button row="2" text="Change second title" tap="{{ changeBarTitleTwo }}" />
    </GridLayout>
</Page>

Playground demo here (NativeScript + Angular)

Answered By – Nick Iliev

Answer Checked By – Cary Denson (AngularFixing Admin)

Leave a Reply

Your email address will not be published.