Change tab by click on a button angular material 5

Question

I have a problem since Angular 5.X with a form-wizard (mat-tab-group). Everything woks fine by using clicks on tabs, it switchs between tabs but I can't use a "nextStep" or "previousStep" buttons to switch between tabs. Here my code :

component.html

<mat-tab-group [(selectedIndex)]="selectedIndex" (selectedTabChange)="tabChanged($event)" class="mat-tab-group mat-primary"> 

<mat-tab label="Description">
 content...
<mat-card-content class="mat-card-content">
</mat-card-content>
 <mat-card-footer style="margin:0 auto;">
         <div fxLayout="row" fxLayoutAlign="end center">
            <button mat-button type="button" (click)="cancel()" mat-raised-button color="warn">Cancel</button>
            <button color="primary" mat-raised-button (click)="nextStep()" type="button">Next</button>                   
         </div>
     </mat-card-footer>
   </mat-tab>
</mat-tab-group>

component.ts

    public tabChanged(tabChangeEvent: MatTabChangeEvent): void {
        this.selectedIndex = tabChangeEvent.index;
    }

    public nextStep() {
        this.selectedIndex += 1;
    }

    public previousStep() {
        this.selectedIndex -= 1;
    }

I'm stuck with [(selectedIndex)]="selectedIndex" because it doesn't work with mat-expansion-panel (Mat expansion panel is opened by default bug?). So I have to remove it but, if i remove it my buttons "nextStep" and "previousNext" doesn't work anymore...

I'm using : Angular material 5.1.1

Any idea about this ?

EDIT : As I said, the problem was about the selectedIndex... I used the selectedIndex in a condition to display the mat-expansion-panel. Bad idea... so solve the problem, I've created a boolean in my component to display or not the mat-expansion-panel. If i'm on the good tab, I set the boolean to true else, the boolean is false. Hope it's clear ^^

Possible duplicate of [md-tabs Using code to goto a tab in angular 2 material design](https://stackoverflow.com/questions/42539272/md-tabs-using-code-to-goto-a-tab-in-angular-2-material-design) — Aravind, Feb 02 '18 at 09:34
Your plunker is not running actually (lot of errors with angular/cdk..) — Joe Allen, Feb 02 '18 at 09:37
@JoeAllen , please check https://stackoverflow.com/a/48313850/2349407 , working demo : https://stackblitz.com/edit/angular-mat-tab-trigger — Vivek Doshi, Feb 02 '18 at 09:40
Thank you very much ! But I really think my problem is about mat-expansion-panel in tab. My mat-expansion-panel are expanded when I go on the tab. — Joe Allen, Feb 02 '18 at 09:41
@JoeAllen , can you create a working demo as we did , then we can help you quickly ? — Vivek Doshi, Feb 02 '18 at 09:55
What exactly is the problem here? This should perfectly work. — FAISAL, Feb 02 '18 at 10:13
Actually, there real problem is the selectedIndex of a tab when I change it manually through a button. If I do that, my mat-expansion-panel is always expanded. I have to click two times on the arrow to close it... do you understand what I mean ? — Joe Allen, Feb 02 '18 at 10:48
Possible duplicate of [Mat expansion panel is opened by default bug?](https://stackoverflow.com/questions/48566845/mat-expansion-panel-is-opened-by-default-bug) — Kim Kern, Feb 02 '18 at 11:42

mr.mikkancs · Answer 1 · 2019-04-15T06:42:13.087

The problem with your solution is that the selectedIndex shall be a number! You have to set to 0 or any other index:

selectedIndex: number = 0;

You filled it with MatTabChangeEvent in tabChanged() fucntion. Remove that function or use a different variable instead.

(Try to debug with console log.)

This is a working example:

html:

  <button (click)="previousStep()">
    <mat-icon>arrow_back_ios</mat-icon>
  </button>
  <button (click)="nextStep()">
      <mat-icon>arrow_forward_ios</mat-icon>
  </button>
    <mat-tab-group [selectedIndex]="selectedIndex">
      <mat-tab *ngFor="let number of [0,1,2,3,4];let i=index; ">
        <ng-template mat-tab-label>
        </ng-template>
        content{{number}}
      </mat-tab>

ts:

selectedIndex: number = 0;

 nextStep() {
    if (this.selectedIndex != maxNumberOfTabs) {
      this.selectedIndex = this.selectedIndex + 1;
    }
    console.log(this.selectedIndex);
  }

  previousStep() {
    if (this.selectedIndex != 0) {
      this.selectedIndex = this.selectedIndex - 1;
    }
    console.log(this.selectedIndex);
  }

score 0 · Answer 2 · answered Apr 28 '20 at 22:33

0

The above answer works well. However, you might want to disable the mat-tab and hide it.

.mat-tab-group .mat-primary .mat-ink-bar { visibility: hidden !important; }

<mat-tab disabled="true" *ngFor="let number of [0,1,2];let i=index; ">

answered Apr 28 '20 at 22:33

Christopher You

53
1
13

Change tab by click on a button angular material 5

2 Answers2