0

I'm trying to reset mat-tab-group to set first tab as active when routeParams changed.

ts file:

public index = 0;

ngOnInit() {
  this.subscription = this.route.params.subscribe((routeParams: Params) => {
    // some code

    this.index = 0;
  });
}

html file

<mat-tab-group [selectedIndex]="index">
  <mat-tab></mat-tab>
  <mat-tab>
    <a [routerLink]="['/url/2']"></a>
  </mat-tab>

In the second tab I have a router link to another card - so, when router navigates to this card component doesn't reloaded (route is /url/:id). But first tab doesn't become active - even if I set index inside subscription on route params.

Manish Balodia
  • 1,863
  • 2
  • 23
  • 37
Rychagov
  • 21
  • 5

1 Answers1

1

I did it. The reason was in two way binding for selectedIndex.

https://github.com/angular/material2/issues/10282

I set <mat-tab-group [(selectedIndex)]="index"> instead of <mat-tab-group [selectedIndex]="index"> and it works.

So, when I go by routerLink from second tab of one card to another card, then first tab of new card becomes active.

Rychagov
  • 21
  • 5