Array for Header columns

Using standalone components in Angular, you can create a more modular and isolated setup without the need for an NgModule. Here's how you can achieve the dynamic table using Angular standalone components in version 17.

Step 1: Create the Standalone Component

First, create a standalone component for your dynamic table. This component will have the same logic and template as before but will be defined as a standalone component.

dynamic-table.component.ts

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
import { MatTableModule } from '@angular/material/table';

@Component({
  selector: 'app-dynamic-table',
  standalone: true,
  imports: [MatTableModule],
  template: `
    
        

      
{{ header.Head }}
        
{{ element[header.FieldName] }}
      

      

      

    
  `,
})
export class DynamicTableComponent implements OnChanges {
  @Input() arrHeader: any = [];
  @Input() arrGrid: any = [];
  displayedColumns: string[] = [];

  ngOnChanges(changes: SimpleChanges) {
    if (changes.arrHeader) {
      this.displayedColumns = this.arrHeader.map((header: any) => header.FieldName);
    }
  }
}

Step 2: Use the Standalone Component in Your Main Application Component

app.component.ts

import { Component } from '@angular/core';
import { DynamicTableComponent } from './dynamic-table.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DynamicTableComponent],
  template: `
    
  `,
})
export class AppComponent {
  arrHeader = [
    { Head: 'Category', FieldName: 'categoryName' },
    { Head: 'Name', FieldName: 'productName' },
    { Head: 'Description', FieldName: 'productDescription' },
    { Head: 'Price', FieldName: 'productPrice' }
  ];

  arrGrid = [
    { categoryName: 'Electronics', productName: 'Smartphone', productDescription: 'Latest model', productPrice: '$699' },
    { categoryName: 'Home Appliances', productName: 'Washing Machine', productDescription: 'Top Load', productPrice: '$499' }
  ];
}

Step 3: Bootstrap Your Standalone Application

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { provideAnimations } from '@angular/platform-browser/animations';

bootstrapApplication(AppComponent, {
  providers: [provideAnimations()]
}).catch(err => console.error(err));

Summary

1. Standalone Dynamic Table Component:

   • Defined using standalone: true.
   • Imports MatTableModule directly in the component.

2. Standalone App Component:

   • Uses the DynamicTableComponent directly without needing an NgModule.

3. Bootstrap Application:

   • Uses bootstrapApplication to bootstrap the AppComponent.

This approach leverages Angular's standalone component features to create a more modular and isolated setup, allowing for easy maintenance and scalability.

    
      

  
{{ header.Head }}
      
{{ element[header.FieldName] }}
    
  

  

  

 

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
})
export class DynamicTableComponent implements OnInit {
  @Input() arrHeader: any = [];
  @Input() arrGrid: any = [];
  displayedColumns: string[] = [];

  ngOnInit() {
    this.displayedColumns = this.arrHeader.map(header => header.FieldName);
  }
}

This is a basic implementation, make changes and test.

 

Regards,