Display the td column value

[candorthor]

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


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>

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]

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]

I have solved this. Thank you