Angular 6: Switch b/w Tabs

Question

im working on an Angular 6 application, what im trying to do here is, As soon as the user inserts information in the visible input fields and clicks save, i want the view to change to "Products" tab. Products is a separate components and has its own template as well. Appreciate the help

Answer 1

You can add a variable to selectedIndex Input in mat-tab-group.

index = 0; // Or tab you want mat-tab-group to start with

And use it like this

<mat-tab-group [selectedIndex]="index">

And create a button function on click that changes index to number assigned to your Product tab, since it is your second tab, that number is 1.

<button (click)="index = 1">

You can read more on Input and Outputs of mat-tab here: https://material.angular.io/components/tabs/api and check the examples.

Answer 2

In this example, you are using matTabGroup with nested tabs. MatTabGroup allows you to set the start tab with [selectedIndex].

Example:

<mat-tab-group [selectedIndex]="1">
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>