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>
How do you conditionally prevent users from navigating to other tab in Mat tab group? First, we need to add a click listener on the mat-tab-group and disable all tabs because if tabs are not disabled then the user will be able to navigate on them and we want to navigate on tabs conditionally not manually.
Previously you saw how to create tabs in Angular using Angular Material. Now let's see how you can set a default tab. You can use selectedIndex property to set the default tab on the tab group. Setting selectedIndex property as 0 sets the first tab and setting it as 1 sets the second tab.
Tabs and navigation While <mat-tab-group> is used to switch between views within a single route, <nav mat-tab-nav-bar> provides a tab-like UI for navigating between routes.
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;
}
}
}
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With