Display the td column value

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

18 Jul 2019, 10:37

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

rokimoki
Posts: 14
Joined: 28 Jun 2019, 16:04

22 Jul 2019, 17:44

Hi, this is a basic concept of angular, you can do easily with a @Input() in your child component:

child.component.ts (import Input from @angular/core)

Code: Select all

@Input('userName') dataFromParent: string;
parent.component.html

Code: Select all

 <td *ngFor="let col of columns; let i = index">
  <div  class="content-div" *ngIf="i === 0; else otherCols">
    {{rowData[col.field]}}
    <app-child [userName]="rowData[col.field]"></app-child>
  </div>
  <div  class="content-div" #otherCols>
    {{rowData[col.field]}}
  </div>
</td>
Not tested, but you get the idea? But my main question is what do you understand for child component?

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

23 Jul 2019, 06:57

I have solved this. Thank you

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 2 guests