Encountering numerous errors
Unable to read property 'toUpperCase' of undefined ("
]*matRowDef="columns:displayedColumns" >
For dynamically adding rows to the table
<button (click)="addABunch(3)">Add 3</button>
For creating the user with their name and mobile number
<mat-table #table>
<ng-container matColumnDef="Username">
<mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
<mat-cell >
<mat-form-field class="example-full-width">
<input class="form-control" matInput
formControlName="Name">
</mat-form-field>
</cell>
</ng-container>
<ng-container matColumnDef="Mobile">
<mat-header-cell *matHeaderCellDef>Mobile Number</mat-header-cell>
<mat-cell>
<mat-form-field class="example-full-width">
<input class="form-control" matInput
formControlName="Mobile">
</mat-form-field>
</cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns">
</mat-header-row>
<mat-row *matRowDef="columns: displayedColumns"></mat-row>
</mat-table>
Also, here is the corresponding Typescript code
displayedColumns = ['Name', 'Mobile'];
addABunch(n: number) {
for (let x = 0; x < n; x++) {
this.items.push({ value: ++this.max });
}
}