angular material tabs with next button

Solutions on MaxInterview for angular material tabs with next button by the best coders in the world

showing results for - "angular material tabs with next button"
Dario
13 Sep 2020
1// in HTML (¬‿¬)
2<mat-tab-group [selectedIndex]="btnNextPrev.index">
3  ....
4</mat-tab-group>
5
6<button mat-raised-button [disabled]="btnNextPrev.prev" (click)="navig('prev')">Prev</button>
7<button mat-raised-button [disabled]="btnNextPrev.next" (click)="navig('next')">Next</button>
8
9// in TYPESCRIPT ༼ つ ◕_◕ ༽つ
10
11btnNextPrev = {
12    prev: true,
13    next: false,
14    index: 0
15}
16
17navig(n) {
18    switch (n) {
19      case 'next': {
20        this.btnNextPrev.index++
21        if (this.btnNextPrev.index > 3) {
22          this.btnNextPrev.prev = false
23          this.btnNextPrev.next = true
24        } else {
25          this.btnNextPrev.prev = false
26        }
27      }; break;
28      case 'prev': {
29        this.btnNextPrev.index--
30        if (this.btnNextPrev.index == 0) {
31          this.btnNextPrev.prev = true
32          this.btnNextPrev.next = false
33        } else {
34          this.btnNextPrev.next = false
35        }
36      }; break;
37
38    }
39  }