Angular: Select Specific Tab when click of Button

Question

In my application, I have a page with few tabs like General Info, Contact, Ship To, Distributor Branch, Product Assignment and so on. When click I a button from another page, my "Contact" tab should be selected. However, every time when I click my button. It always navigate to my first tab "General Info". How can I ensure of my second tab is selected when I click my button.

The following is my sample code.

page1.html

<mat-card>
    <mat-card-header>
        <h3 class="page-title">{{DistributorTitle}}</h3>
        <mat-card-actions>
            <button  mat-stroked-button (click)="onBack()">Back</button>

        </mat-card-actions>
    </mat-card-header>
    <mat-card-content>
        <div>
            <mat-tab-group>
                <mat-tab label="General Info">
                    <ProfileDist-general-info></ProfileDist-general-info>
                </mat-tab>
                <mat-tab label="Contact">
                    <ProfileDist-contact></ProfileDist-contact>
                </mat-tab>
                <mat-tab label="Ship To">
                    <ProfileDist-ship-to></ProfileDist-ship-to>
                </mat-tab>

                <mat-tab label="Distributor Branch">
                    <ProfileDist-distributor-branch></ProfileDist-distributor-branch>    
                </mat-tab>

                <mat-tab label="Product Assignment">
                    <ProfileDist-product-assignment></ProfileDist-product-assignment> 
                </mat-tab>

                <mat-tab label="Customer Assignment">
                    <ProfileDist-customer-assignment></ProfileDist-customer-assignment> 
                </mat-tab>

                <mat-tab label="Options"> 
                    <ProfileDist-options></ProfileDist-options>
                </mat-tab>
            </mat-tab-group>
        </div>                   
    </mat-card-content>
</mat-card>

page1.ts

import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";

@Component({
  selector: 'lib-profile-dist-ui',
  templateUrl: './profile-dist-ui.component.html',
  styleUrls: ['./profile-dist-ui.component.scss']
})
export class ProfileDistUiComponent implements OnInit {
    DistributorTitle: string;

    constructor(private router: Router) { 
    }

    ngOnInit() {
        this.DistributorTitle = "Distributor Details";
    }

    onBack(){
        this.router.navigateByUrl('/distributors');
    }


}

page2.ts

  onClick(){
    this.router.navigateByUrl('distributors/General');
  }

Answer 1

selectedIndex @Input() can make the tab index change

page1.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from "@angular/router";

@Component({
  selector: 'lib-profile-dist-ui',
  templateUrl: './profile-dist-ui.component.html',
  styleUrls: ['./profile-dist-ui.component.scss']
})
export class ProfileDistUiComponent implements OnInit {
  DistributorTitle: string;
  activeTab: number = 0

  tabIndex = {
    "general": 0,
    "contact": 1,
    "ship_to": 2,
    "distributor_br": 3,
    "product_assg": 4,
    "customer_assg": 5,
    "options": 6
  }

  constructor(
    private router: Router,
    private route: ActivatedRoute,
  ) {
  }

  ngOnInit() {
    this.DistributorTitle = "Distributor Details";
    this.route.params.subscribe(params => {
      if (params['tab']) {
        this.activeTab = this.tabIndex[params['tab']]
      }
      else {
        this.activeTab = 0
      }

    })
  }

  onBack() {
    this.router.navigateByUrl('/distributors');
  }


}

and change html to

....
<mat-tab-group [selectedIndex]="activeTab">
     <mat-tab label="General Info">
....

You need to add tab params in route.ts

if the selectedIndex doesn't changes routing from same page use pluck in rxjs

import 'rxjs/add/operator/pluck';

ngOnInit(){
  this.DistributorTitle = "Distributor Details";
  this.route.params.pluck('tab').subscribe(param => {
      if (param) {
        this.activeTab = this.tabIndex[param]
      }
      else {
        this.activeTab = 0
      }
  }
}

and don't forget to import pluck first