Angular PrimeNG Table Custom Form Elements

// employee.component.ts
import { Component, OnInit } from '@angular/core';
import { SelectItem } from 'primeng/api';

interface Employee {
    name: string;
    role: string;
    status: string;
}

@Component({
    selector: 'app-employee',
    templateUrl: './employee.component.html',
    styleUrls: ['./employee.component.css']
})
export class EmployeeComponent
    implements OnInit { // Updated class name
    data: Employee[] = [
        { name: 'Pratyush', role: 'Developer', status: 'Active' },
        { name: 'Shubham', role: 'Designer', status: 'Inactive' },
        { name: 'Rohit', role: 'Developer', status: 'Active' },
        { name: 'Rishabh', role: 'Manager', status: 'Inactive' },
        { name: 'Piyush', role: 'Designer', status: 'Active' },
        { name: 'Aayush', role: 'Manager', status: 'Inactive' },
    ];

    statusOptions: SelectItem[] = [
        { label: 'Active', value: 'Active' },
        { label: 'Inactive', value: 'Inactive' }
    ];

    constructor() { }
    ngOnInit(): void { }

    saveRow(rowData: Employee): void {
        const rowIndex = 
            this.data.findIndex(item => item === rowData);

        if (rowIndex !== -1) {
            this.data[rowIndex].status = rowData.status;
            console.log('Row data saved:', this.data[rowIndex]);
        } else {
            console.log('Row data not found:', rowData);
        }
    }
}

// app.module.ts
import { NgModule } 
    from '@angular/core';
import { BrowserModule } 
    from '@angular/platform-browser';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { TableModule } 
    from 'primeng/table';
import { DropdownModule } 
    from 'primeng/dropdown';
import { ButtonModule } 
    from 'primeng/button';
import { FormsModule } 
    from '@angular/forms';
import { AppComponent }
    from './app.component';
import { EmployeeComponent } 
    from './employee/employee.component';

@NgModule({
    declarations: [
        AppComponent,
        EmployeeComponent
    ],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        TableModule,
        DropdownModule,
        ButtonModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

// custom-form-table.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators }
    from '@angular/forms';
import { SelectItem } from 'primeng/api';

@Component({
    selector: 'app-custom-form-table',
    templateUrl: './custom-form-table.component.html',
    styleUrls: ['./custom-form-table.component.css']
})
export class CustomFormTableComponent implements OnInit {

    data: any[] = [
        { id: 1, 
          name: 'Shrutin', 
          age: 28, 
          status: 'active' },
        { id: 2, 
          name: 'Rishabh',
          age: 24, 
          status: 'inactive' },
        { id: 3, 
          name: 'Nkhil', 
          age: 32, 
          status: 'pending' }
    ];

    columns: any[] = [
        { field: 'name', header: 'Name' },
        { field: 'age', header: 'Age' },
        { field: 'status', header: 'Status' }
    ];

    statusOptions: SelectItem[] = [
        { label: 'Active', value: 'active' },
        { label: 'Inactive', value: 'inactive' },
        { label: 'Pending', value: 'pending' }
    ];

    dataForm!: FormGroup;

    constructor(private fb: FormBuilder) { }

    ngOnInit(): void {
        this.dataForm = this.fb.group({
            name: ['', Validators.required],
            age: ['', Validators.required],
            status: ['active']
        });
    }

    onSubmit() {
        if (this.dataForm.valid) {
            const formData = this.dataForm.value;
            const newId = this.data.length + 1;
            this.data.push({
                id: newId,
                name: formData.name,
                age: formData.age,
                status: formData.status
            });
            this.dataForm.reset();
        }
    }

    // Function to handle changes
    // in the status dropdown
    onStatusChange(event: any, rowIndex: number) {
        this.data[rowIndex].status = event.value;
    }
}

// app.module.ts
import { BrowserModule }
    from "@angular/platform-browser";
import { NgModule }
    from "@angular/core";
import { ReactiveFormsModule, FormsModule }
    from "@angular/forms";
import { HttpClientModule }
    from "@angular/common/http";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { TableModule }
    from "primeng/table";
import { DropdownModule }
    from "primeng/dropdown";
import { AppComponent } 
    from "./app.component";
import { CustomFormTableComponent }
    from "./custom-form-table/custom-form-table.component";

@NgModule({
    declarations: [AppComponent, CustomFormTableComponent],
    imports: [
        BrowserModule,
        ReactiveFormsModule,
        FormsModule,
        HttpClientModule,
        BrowserAnimationsModule,
        TableModule,
        DropdownModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule { }