How to pass primeng datatable component from parent to child component?

Question

I made a primeng datatable with several functionalities. Now I want to create a child component to pass the table. I can see the data on the console but it somehow turned into undefined and don't show up on the table. Here's my codes:

parent.component.html

<div>
<app-table [formatData]="maturity" ></app-table>

</div>

child.component.html

<p-table (onFilter)="handleFilter($event)"  styleClass="p-datatable-gridlines"  editMode="row"  #dt  [exportHeader]="'customExportHeader'"  [(selection)]="selectedProducts"   rowGroupMode="rowspan" groupRowsBy="dateOfRelease" sortField="dateOfRelease"   dataKey="ldId"     [showCurrentPageReport]="true"   [value]="formatData"   (sortFunction)="customSort($event)"

    [rows]="10" [paginator]="true"   [loading]="loading" [globalFilterFields]="['date','ldId','projectNo',  'maturityOrderNo','category','amount','metricType']">

Answer 1

You need to remove TableComponent from boostrap list in your app.module.ts. And add CommonModule in your imports list in the same file

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { TableModule } from 'primeng/table';
import { ButtonModule } from 'primeng/button';
import { AccordionModule } from 'primeng/accordion';
import { MenuItem } from 'primeng/api';
import { InputTextModule } from 'primeng/inputtext';

import { ToastModule } from 'primeng/toast';
import { CalendarModule } from 'primeng/calendar';
import { SliderModule } from 'primeng/slider';
import { MultiSelectModule } from 'primeng/multiselect';
import { ContextMenuModule } from 'primeng/contextmenu';
import { DialogModule } from 'primeng/dialog';
import { DropdownModule } from 'primeng/dropdown';
import { ProgressBarModule } from 'primeng/progressbar';
import { HttpClientModule } from '@angular/common/http';
import { FormsModule } from '@angular/forms';
import { MetricTypePipe } from './metric-type.pipe';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule, PercentPipe } from '@angular/common';
import { AutoCompleteModule } from 'primeng/autocomplete';
import { TableComponent } from './component/table/table.component';

@NgModule({
  declarations: [AppComponent, MetricTypePipe, TableComponent],
  imports: [
    BrowserModule,
    CommonModule,
    AppRoutingModule,
    TableModule,
    ButtonModule,
    AccordionModule,
    CalendarModule,
    SliderModule,
    DialogModule,
    HttpClientModule,
    MultiSelectModule,
    ContextMenuModule,
    DropdownModule,
    FormsModule,
    ButtonModule,
    ToastModule,
    InputTextModule,
    ProgressBarModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    AutoCompleteModule,
  ],
  providers: [MetricTypePipe, PercentPipe],
  bootstrap: [AppComponent],
})
export class AppModule {}