Dynamic binding for *tabItem directive to show selected iconSource

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

[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.

[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;
}