How to use Angular Material Table as common component.

To use Angular Material Table as a common component, you can create a custom Angular component that encapsulates the table functionality. This approach ensures reusability and consistency throughout your application. Here's a basic example of how you can achieve this:

1. Create a new Angular component for your shared table:

2. ng generate component shared-table
   

3. Implement the table logic within the shared-table.component.html file:

4. 
       
   
     
     
    Column 1 
       
    {{ element.column1 }} 
     
     
   
     
   
     
   
   
   

5. Customize the table styles and behavior in the shared-table.component.ts file:

6. import { Component, Input } from '@angular/core';
   
   @Component({
     selector: 'app-shared-table',
     templateUrl: './shared-table.component.html',
     styleUrls: ['./shared-table.component.css']
   })
   export class SharedTableComponent {
     @Input() data: any[];
     displayedColumns: string[] = ['column1', 'column2', 'column3']; // Define your columns here
   }
   

7. Finally, use the app-shared-table selector in any component where you want to display the shared table:

8.