Angular How to catch mat-tab changed event

Question

Here I need to send tab.staffMemberId to a service and get values and fill matInput values. I need to send tab.staffMemberId to service when tab is changing

<mat-tab-group>
<mat-tab *ngFor="let tab of StaffMemberList; let index = index" [label]="tab.staffMemberId">
{{tab.id}}
<mat-grid-list cols="3" rowHeight="8:1">
    <mat-grid-tile>
      <mat-form-field class="full-width">
        <input matInput placeholder="Position" >
      </mat-form-field>
    </mat-grid-tile>
</mat-grid-list>

Check out this answer: https://stackoverflow.com/a/42059318/2683913 Might be a duplicate? — ntrch, Sep 03 '19 at 12:27

score 33 · Accepted Answer · answered Oct 23 '19 at 06:43

You can do it in this way

 <mat-tab-group  [(selectedIndex)]="selectedTabIndex" (selectedTabChange)="onTabChanged($event);">
      <mat-tab formArrayName="staffMembers" #pft  *ngFor="let staffMember of formData.get('staffMembers').controls; let i = index">
        <div [formGroupName]="i">
          <ng-template mat-tab-label>
            {{staffMember.controls.staffMemberId.value}} <a>
          </a>
          </ng-template>
            <div class="form-group">
              <label for="name"> Name</label>
              <input type="text" class="form-control" id="name" formControlName="name">
           </div> 
        </div>
    </mat-tab>
 </mat-tab-group>

and Create FormArray For staffMember Like this in Component

formData: FormGroup = this.formBuilder.group({
    staffMembers: this.formBuilder.array([this.createItem()])

 }

On Tab Change you can assign value To form Array

 createItem(): FormGroup {
    return this.formBuilder.group({
      staffMemberId: ['',],
      name: ['',],

    });
  }
   addItem(): void {
    this.projectFundingItems = this.formProjectGeneralData.get('staffMembers') as FormArray;
    this.projectFundingItems.push(this.createItem());
  }


  onTabChanged($event) {
    let clickedIndex = $event.index;
    let length = (<FormArray>this.formData.controls['staffMembers']).length;
    if (clickedIndex === length) {
      if ((<FormArray>this.formData.controls['staffMembers']).at(length - 1).dirty) {
        this.addItem();
        this.selectedTabIndex = clickedIndex - 1;
      } else {
        if (this.formData.staffMembers.length === clickedIndex) {
          this.addItem();
        }
        this.selectedTabIndex = clickedIndex - 1;
      }
    }
  }

Thanks. this is the answer what I expected. – dasunse Oct 23 '19 at 07:06 — dasunse, Oct 23 '19 at 07:06

score 18 · Answer 2 · answered Oct 01 '18 at 14:56

18

It starts from index 0 to the number of tabs you create.

In your html

<mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)">
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
</mat-tab-group>

In component use this code

tabChanged = (tabChangeEvent: MatTabChangeEvent): void => {
    console.log('tabChangeEvent => ', tabChangeEvent); 
    console.log('index => ', tabChangeEvent.index); 
}

this should be fine as you need.

answered Oct 01 '18 at 14:56

Prashanth Damam

841
8
25

You should save the data in a variable and create a service and pass the id `const savedElement= this.dataService.getStaffId();` – Prashanth Damam Oct 01 '18 at 14:59
1

In here i need send mat-lab label values ( such as "Tab 1", "Tab 2") to tabChanged() function. And I need to say something again here mat-tab label values( [label]="tab.staffMemberId") i'm getting from *ngFor="let tab of StaffMemberList; let index = index". – dasunse Oct 02 '18 at 03:05
You need the label names that are dynamic? – Prashanth Damam Oct 02 '18 at 05:44
Yp. It is changing (refer the line no 2 in Question) – dasunse Oct 02 '18 at 06:07
How do I differentiate between a tab the user manually clicked and a tab that was changed to in code? I have (selectedTabChange)="tabChanged($event, true)" with the "true" being didUserManuallyClick tab so I can use that in my logic. but for some reason it's calling this on full page refresh with the true argument even when I don't manually click it. – Collin Nov 29 '21 at 17:58
@CollinFox you can get that info in the event. log your event and you can handle that case – Prashanth Damam Nov 30 '21 at 05:34

score 3 · Answer 3 · answered Oct 01 '18 at 10:51

3

like this

 <mat-tab-group #tabGroup (selectedTabChange)="tabChanged($event)">

answered Oct 01 '18 at 10:51

Furkan Kaan Uluçay

86
7

I need to send send tab.staffMemberId to a service and get some values and fill some form field data inside the tab. So how to do it? – dasunse Oct 01 '18 at 10:52
like this tabChanged = (tabChangeEvent: MatTabChangeEvent): void => { console.log(tabChangeEvent); – Furkan Kaan Uluçay Oct 01 '18 at 10:54
i need to send send tab.staffMemberId (mat-tab lable value) value to your function tabChanged() – dasunse Oct 01 '18 at 11:23

Angular How to catch mat-tab changed event

3 Answers3