Generate colums w/ Angular Material using an *ngFor - html

Question

I'm using a tutorial that takes data from the component.
Here I have to insert every column by myself, instead I want to generate them like the example on the bottom of the page.
<div>
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Id </th>
<td mat-cell *matCellDef="let user"> {{user.id}} </td>
</ng-container>
<ng-container matColumnDef="firstName">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
<td mat-cell *matCellDef="let user"> {{user.firstName}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
Here I wasn't using Material, I generated every column from a string[]:
getColumns(): string[] {
return ['id', 'firstName', 'lastName', 'age'];
}//this is in my service
So if I delete or modify a column in my service, it will be removed in the table.
<table>
<tr>
<th *ngFor="let col of columns" >{{col}}
</th>
</tr>
<tr *ngFor="let user of users">
<td *ngFor="let col of columns">{{user[col]}}</td>
</tr>
</table>
<div>
</div>
How can I apply the same method in the ng-container, th and td's?

Answer 1

You Can Use Like This.
<table class="table table-bordered table-info">
<thead class="bg-primary text-white">
<tr>
<th>Product</th>
<th>Qty</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr *ngFor='let kotitems of cartitems'>
<td>{{kotitems.Product}}</td>
<td>{{kotitems.Qty}}</td>
<td>{{kotitems.Amt}}</td>
</tr>
</tbody>
<tfoot class="bg-primary text-white">
<tr>
<td>Total</td>
<td colspan="2" style="text-align: center;">{{getSum()}}</td>
</tr>
</tfoot>
</table>