Building a Flexible Angular Components: A Journey in Custom Component Development

Welcome to the dynamic landscape of web development, where the ability to create versatile and efficient components is key. Angular, with its robust, component-centric architecture, offers fertile ground for such innovation. In this series, we delve into crafting reusable Angular components like a Data table, Dropdown menu, and Chipset, embracing the concept of reusability in Angular development. Join me on this journey of overcoming technical challenges and mastering the art of building components that are not just functional but adaptable and enduring.

The Importance of Reusability in Angular

1. Efficiency: By writing less code for common functionalities, developers can focus more on unique features, streamlining the development process.
2. Maintainability: Reusable components are built with clear, well-defined interfaces, simplifying updates and debugging.

Setting Up Your Angular Environment

1. Install Angular CLI: npm install -g @angular/cli
2. Create a New Angular Project: ng new generic-table-app
3. Run Your Application: Navigate to your new project directory and run ng serve.

Voilà! You’ve successfully set up your Angular development environment.

Building the Core Reusable Component: Generic-data-table

• Generate a New Component: ng generate component generic-data-table, which creates essential files for our component.
• In your parent component define below fields
• Data Preparation: Define a dataSource array, representing rows in our table.
• Column Configuration: The columns array represents table columns, linking data to its visual representation.

dataSource = [
    { id: 1, name: 'Item 1', description: 'Description 1' },
    { id: 2, name: 'Item 2', description: 'Description 2' }
  ];
  columns = [
    { field: 'id', label: 'ID', width: 10 },
    { field: 'name', label: 'Name', width: 30, editable: true },
    { field: 'description', label: 'Description', width: 60 }
  ];

Wiring Inputs and Outputs

Our table’s ability to handle a variety of data scenarios hinges on the @Input() decorator

• DataSource: An array that feeds data to the table.
• Columns: Defines the structure and appearance of the table.

@Input() dataSource: any[] = [];
@Input() columns: any[] = [];

Installing Angular Material

Command: npm install @angular/material

Import MatTableModule in app.module.ts:

import { MatTableModule } from '@angular/material/table';

Crafting the HTML: Bringing Our Angular Data Table to Life

• Dynamic Columns: Using *ngFor to loop through columns for dynamic rendering. For each column, [matColumnDef]="column.field" sets up the individual column definition.
• Headers and Cells: Defining headers (<th>) and data cells (<td>) in the table. We display the column labels using{{column.label}}
• Row Definitions: Setting up sticky headers and data rows.

<div class="table-parent">
    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
        <ng-container *ngFor="let column of columns; let i = index" [matColumnDef]="column.field">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>
                {{ column.label }}
                <span class="resize-handle" (mousedown)="$event.stopPropagation();onResizeColumn($event, i);"></span>
            </th>
            <td mat-cell *matCellDef="let element" [style.width.%]="column.width">{{ element[column.field] }}</td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
</div>

Rendered table, showing the headers, cells, and rows

Wrapping Up: The First Chapter in Our Angular Data Table Saga

As we reach the end of this first installment in our journey through the creation of the generic-data-table component, let’s take a moment to reflect on the ground we’ve covered. We embarked on this adventure by setting up our Angular environment, and then we delved deep into the intricacies of building a dynamic and reusable data table component.

What’s Next?

But our story doesn’t end here. In our next article, we will dive into the exciting world of pagination and sorting. We’ll unravel how these functionalities can be seamlessly integrated into our table, enhancing its interactivity and usability, especially when dealing with large datasets.