Display the td column value in child component from parent component.

UI Components for Angular
Post Reply
candorthor
Posts: 5
Joined: 18 Jul 2019, 04:58

18 Jul 2019, 08:29

I have parent component and child component. In parent component I have a column "Peter" (Screenshot shared). I want the Display name "Peter" to be displayed on the child component. How can I do that?

Screenshot is attached here. Please find the screenshot.
In parent, there is a column "Peter" which needs to be displayed in child.

parent.component
Image

child component
Image

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>
parent.ts

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() {
    }
    
}
All I need to do is just pass the data to the child component. Please help me in solving this.

candorthor
Posts: 5
Joined: 18 Jul 2019, 04:58

23 Jul 2019, 06:58

I have solved this. Thank you

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest