TabView selectedIndex change from Child component


#1

I have an app with a TabView component,
Can the tabSelectedIndex value be changed from within a child component?

The content of each tab is sourced using the routing.

The main html

<TabView #tabViewHome [(ngModel)]="tabSelectedIndex" (selectedIndexChange)="onIndexChanged($event)" selectedColor="#d8292f">
    <ng-template tabItem title="Dashboard" iconSource="{{dashActive === true ? 'res://dashboard' : 'res://dashboard'}}" >
        <StackLayout>
    <router-outlet name="dashoutlet"></router-outlet>
        </StackLayout>
    </ng-template>
    <ng-template tabItem title="Properties" iconSource="{{propActive === true ? 'res://properties' : 'res://properties'}}">
        <StackLayout>
    <router-outlet name="propoutlet"></router-outlet>
        </StackLayout>
    </ng-template>
</TabView>

I have a button in one of the components that loads content into another router-outlet.
I need this to then update the selected tab of the TabView.


#2

You can always access frame and current page globally from frame module.

import * as frame form "ui/frame";
...
...
const page = frame.topmost().currentPage;
// from page you can traverse down to any component

If you prefer more angular way of doing it, you may use @Inject to inject parent component into child component Or pass parent instance as @Input to child Or you can even use ViewContainerRef.


#3

Thank you for your response.

I managed to get it to work using @Inject