Nativescript-angular: Dynamic binding for *tabItem directive to show selected iconSource

[leocaseiro]

Hi, I'm trying to make my tabItems dynamic. I'm trying to replace my icon.png the same way that it's done on marketplace app.

I believe the tabItem directive gets wherever is on it's ngOnInit and after that won't update anymore. Are there any way to bind(watch) values, instead? So we could update the sourceIcon or text?

<TabView [(ngModel)]="selectedIndex">
    <StackLayout *tabItem="{title: 'Tab1', iconSource: selectedIndex == 1 ? 'res://icona' : 'res://icona1'}">
        <Label text="You are in Tab 1"></Label>
        <Label text="{{selectedIndex}}"></Label>
    </StackLayout>
    <StackLayout *tabItem="{title: 'Tab2', iconSource: selectedIndex == 1 ? 'res://iconb' : 'res://iconb1'}">
        <Label text="You are in Tab 2"></Label>
        <Label text="{{selectedIndex}}"></Label>
    </StackLayout>
</TabView>

export class AppComponent {
    public selectedIndex: number = 0;
}

My label shows the correct selectedIndex, but the Tab keeps as it is on load. If I set selectedIndex = 1 on my ngOnInit, shows the second tab selected tab, but after that, won't change the icon. The tab works great.

Thanks

[aalhaimi]

Exactly my problem.. I even tried replacing the whole JSON object, like:
*tabItem="selectedIndex == 1 ? { title: 'Tab1', iconSource:'res://icona'} : { title: 'Tab1', iconSource:'res://icona1'}"
But it didn't work either.

[aalhaimi]

My temporary solution is to leave the icons fixed, and just change the text font color.. You can check it out here.

[nsndeck]

We are working on a solution for this scenario and it will be available by the end of the day in master branch (so 2-3 days after will be available in npm too). When I push the change will post a sample example how to use the new functionality of the TabViewDirective.
Sorry for the inconvenience caused.

[leocaseiro]

Thank you both for big help.

[aalhaimi]

Awesome.. Just saw the update in the master branch. Thanks @nsndeck!

[nsndeck]

Yep this is online now. For more information how to used it just review ng-sample\app\examples\tab-view\tab-view-test.html first tab. The example shows a binding for title property, but I can ensure you that it also works for iconSource.

[leocaseiro]

Hi @nsndeck, thank you for this fix.

I'd like to test it on my app, how do I use the newest code for nativescript-angular?
Do I need to wait for the npm?

Thanks

[leocaseiro]

I've tried to install versions [email protected] and [email protected], however, both are not working properly.

I'll wait for the next release.

[NathanWalker]

@leocaseiro you can use now with their recent next build setup. Point your npm package to this:
"nativescript-angular": "next"

👍

[leocaseiro]

Hi @NathanWalker, thanks for that.
However, I believe the next version is getting an error perhaps with the router, because it's happening only while I redirect with router.navigate()

file:///app/tns_modules/@angular/platform-server/src/parse5_adapter.js:619:96: JS ERROR Error: not implemented

I might investigate it later or just wait for the next release be published.

Again, Thanks for that.

[nsndeck]

Hi @leocaseiro,
[email protected] build should work fine with TabView iconSource binding. Could you please try it on a separate project (to eliminate any router related problems) and let me know how it goes? It will help me to fix any problem with TabView directive before official release. Thanks in advance.

[leocaseiro]

Hi @nsndeck, first of all, I'm sorry I didn't test before. I didn't have time to.

Well, thank you so much for this fix. I've just updated to the new [email protected] and it's working nice.

I'm able to custom the title and the iconSource as you mentioned.

However, I've noticed that the selectedColor is not working for my iconSource. They still getting the ios blue on selectedColor. It only works for text color.

My html:

<TabView #element [(ngModel)]="selectedIndex" selectedColor="#d8292f">
    <template tabItem iconSource="{{selectedIndex === 0 ? 'res://tab1_filled' : 'res://tab1'}}">
        <StackLayout>
            <label text="My Tab 1"></label>
        </StackLayout>
    </template>
    <template tabItem iconSource="{{selectedIndex === 1 ? 'res://tab2_filled' : 'res://tab3'}}"
        <StackLayout>
            <label text="My Tab 2"></label>
        </StackLayout>
    </template>
    <template tabItem title="{{selectedIndex === 2 ? 'Tab 3 selected' : 'Tab 3'}}">
        <StackLayout>
            <label text="My Tab 2"></label>
        </StackLayout>
    </template>
</TabView>

Could you please help me with that?
It supposed to be a red #d8292f icon instead, but I'm getting grey(unselected) and blue(selected) only on ios. (need to test on android)

Thanks.

[Ihor912]

Hi guys,
This solution for me. Maybe it will help someone else.

I use two different icons for the selection state and for the inactive state.
Also, property iosIconRenderingMode value should be "alwaysOriginal".

In template:

<TabView tabBackgroundColor="#6E7AFA" androidTabsPosition="bottom" iosIconRenderingMode="alwaysOriginal" (selectedIndexChanged)="tabViewIndexChange($event)">
    <page-router-outlet *tabItem="homeTab" name="homeTab"></page-router-outlet>
    <page-router-outlet *tabItem="settingsTab" name="settingsTab"></page-router-outlet>
</TabView>

In component:

homeTab: any;
settingsTab: any;

constructor() {
    this.homeTab  = { iconSource: this.getIconSource("home") };
    this.settingsTab  = { iconSource: this.getIconSource("settings") };
}

tabViewIndexChange(args) {
    const index = args.newIndex;
    this.homeTab = { iconSource: this.getIconSource(index === 0 ? "home_selected" : "home") };
    this.settingsTab = { iconSource: this.getIconSource(index === 1 ? "settings_selected" : "settings") };
}

getIconSource(icon: string): string {
    const iconPrefix = isAndroid ? "res://" : "res://tabIcons/";
    return iconPrefix + icon;
}