Check out the code snippet below.
I have a mat tab group with a mat tab corresponding to each ValidationStep object in the validationSteps[] array in my TypeScript file through two-way binding. Whenever I add a new element to the array, a new tab is dynamically added to the front end.
Now, I want to be able to simulate a user clicking on the tab to view it after programmatically adding a new object to the array. How can I achieve this functionality?
The component looks like this:
export class AddEditControlComponent {
validationSteps: ValidationStep[];
addDocumentStepButtonClick():{
//create validationStep object and add it to array
}
}
This is the HTML template. You can click the button to add a validation step:
<div class="panel-group">
<div class="panel panel-default">
<mat-tab-group [selectedIndex]="selectedTabIndex">
<mat-tab disabled>
<ng-template mat-tab-label>
<button (click)="addDocumentStepButtonClick()">
Add Document Step
</button>
</ng-template>
</mat-tab>
<div *ngFor="let step of validationSteps; let i = index ">
//mat tab for each validationStep
</div>
</mat-tab-group>
</div>
</div>