Dynamic columns and data in Angular Material Table

Hi Webtual

  I dont want to hardcode columns in HTML. It should be dynamic.

Thanks

Display Dynamic Columns and Data in Angular Material Table

Hey! To display only `empName` and `empEmail` in your Angular Material Table, follow these steps:

1. Install Angular Material:

   ng add @angular/material
 

2. Define Your Data and Columns:
   In your component, define the data and displayed columns:
   ```typescript
   export class YourComponent {
     displayedColumns: string[] = ['empName', 'empEmail'];
     dataSource = [
       { empId: 1512, empName: 'Mark1', empContactNo: '6754673254', empAltContactNo: '8762347483', empEmail: '[email protected]' }
     ];
   }
   ```

3. HTML Template:
   Use Angular Material table in your HTML template:
   ```html
   

     
     
       
       
     

     
     
       

       
     

     
     

     
   

Employee Name	{{element.empName}}	Employee Email	{{element.empEmail}}

   ```

This setup will show a table with only the `empName` and `empEmail` columns.