How to use Angular Material Table as common component.

Question

Hi How to use Angular Material Table as common component. I don't want to replicate in all components. Thanks

Jayraj Chhaya · Answer

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: Create a new Angular component for your shared table: ng generate component shared-table Implement the table logic within the shared-table.component.html file: Column 1 {{ element.column1 }} Customize the table styles and behavior in the shared-table.component.ts file: 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 } Finally, use the app-shared-table selector in any component where you want to display the shared table:

How to use Angular Material Table as common component.

Answers (1)