CODEWITHSUNDEEP
angulartypescriptangular-material
dasunse
dasunse

Reputation: 3089

Angular How to catch mat-tab changed event

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>

Upvotes: 29

Views: 80679

Answers (3)

Chathuran D
Chathuran D

Reputation: 2430

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;
      }
    }
  }

Upvotes: 39

Prashanth Damam
Prashanth Damam

Reputation: 931

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.

Upvotes: 21

Furkan Kaan Ulu&#231;ay
Furkan Kaan Ulu&#231;ay

Reputation: 96

like this

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

Upvotes: 4

Related Questions