How to convert HTML table to angular material table (mat-table)?

Question

I have new to Angular Material and trying to convert basic Angular table to Angular material table using mat-table

I am not sure where to start from. How can I convert below table to mat-table?

Here is my.html file which contains table

 <div> <h2>Count Data</h2> <ng-container> <table style = 'width: 50%;'> <tr> <td>Select 1 {{newFinal.color}}</td> <td>{{newFinal.zind}}</td> </tr> <tr> <td colspan = '3' class = 'bold'> Wasi Final: {{newFinal.Queue}} ({{newFinal.selection}}) </td> </tr> <tr> <td colspan = '3' class = 'bold'> Collar Final: ({{newFinal.Titir}}) </td> </tr> </table> </ng-container> </div>

Answer 1

https://material.angular.io/components/table/overview

the doc is amazing and full of example