Answers for "angular material tabs with next button"

angular material tabs with next button

// in HTML (¬‿¬)
<mat-tab-group [selectedIndex]="btnNextPrev.index">
  ....
</mat-tab-group>

<button mat-raised-button [disabled]="btnNextPrev.prev" (click)="navig('prev')">Prev</button>
<button mat-raised-button [disabled]="btnNextPrev.next" (click)="navig('next')">Next</button>

// in TYPESCRIPT ༼ つ ◕_◕ ༽つ

btnNextPrev = {
    prev: true,
    next: false,
    index: 0
}

navig(n) {
    switch (n) {
      case 'next': {
        this.btnNextPrev.index++
        if (this.btnNextPrev.index > 3) {
          this.btnNextPrev.prev = false
          this.btnNextPrev.next = true
        } else {
          this.btnNextPrev.prev = false
        }
      }; break;
      case 'prev': {
        this.btnNextPrev.index--
        if (this.btnNextPrev.index == 0) {
          this.btnNextPrev.prev = true
          this.btnNextPrev.next = false
        } else {
          this.btnNextPrev.next = false
        }
      }; break;

    }
  }