Screenshot is attached here. Please find the screenshot.
In parent, there is a column "Peter" which needs to be displayed in child.
parent.component
child component
Code has been pasted below.
parent.html
Code: Select all
<p-table [columns]="cols" [value]="informationList" dataKey="vin" [rows]="global.currentRecords" [rowsPerPageOptions]="global.rowsPerPageOptions">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns" let-rowIndex="rowIndex">
<tr>
<td *ngFor="let col of columns">
<div class="content-div" >
{{rowData[col.field]}}
</div>
</td>
</tr>
</ng-template>
</p-table>
Code: Select all
import { Component, EventEmitter, Input, OnInit, OnChanges, Output, SimpleChange, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './discount-history.component.html',
styleUrls: ['./discount-history.component.css']
})
export class ParentComponent implements OnInit {
cols: any[];
currentRecords: any;
informationList = [
{
'name': 'Peter',
'number': '12345',
'country': 'Russia',
},
];
constructor(appInjectable: AppInjectable, private activatedRoute: ActivatedRoute, public formBuilder: FormBuilder, public router: Router, public authService: AuthService) {
this.currentRecords = 1;
this.cols = [
{ field: 'name', header: ' Display Name' },
{ field: 'number', header: 'Display Number' },
{ field: 'country', header: 'Display Country' },
];
}
ngOnInit() {
}
}