In Angular Mat Tab, how to navigate user to a different tab from a child component?

Question

I have 4 tabs in an angular page (made of mat-tab), each tab contains one child component wrapping other smaller components to provide functionality of that tab page.

Now, from a child component in one of the tab, I want to take the user to 2nd or 3rd tab by a click of a button. How to navigate a user to a different tab from a child component sitting deep inside another tab?

I am not using router here, and I want to pass a data object to a child component sitting in different tab.

Answer 1

I can think of a few solutions here:

1. Just keep emitting @Output event from your child component until it reaches the parent component where you have control over the tabs.

2. You can also pass a Subject to the child components from the parent component so that you can subscribe to the subject in parent component and use .next(index:number) to send message to the parent component.

3. If your child components are too nested and random, make a global service to hold a Subject and have a method like changeTab(index:number) inside which you will do subject.next(index) and in your parent component, you will subscribe to that and change accordingly.