CODEWITHSUNDEEP
nativescriptnativescript-angular
Jose L. Garcia
Jose L. Garcia

Reputation: 336

Nativescript Angular SegmentedBar item dynamic title

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

Upvotes: 0

Views: 650

Answers (2)

Nick Iliev
Nick Iliev

Reputation: 9670

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)

Upvotes: 1

Jose L. Garcia
Jose L. Garcia

Reputation: 336

I've found a solution with this code for any people with the same problem:

First, define native element (don't forget to add #SegmentedBar to xml):

@ViewChild('SegmentedBar') SegmentedBar: ElementRef;

Change title:

this.SegmentedBar.nativeElement.items[3].title = 'Notes (' + this.order.notes.length + ')';

These code only refresh item title and not change position, etc.

Thanks Jose

Upvotes: 1

Related Questions