Dynamic columns and data in Angular Material Table

Sign in to answer this question.

• RR

  Ramco Ramco2y agoPosted Jul 2, 2024, 12:36 PM

  Hi Webtual

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

  Thanks
• 

  Webtual Global2y agoPosted Jul 2, 2024, 12:27 PM

  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.