CODEWITHSUNDEEP
angulardata-bindingngfor
José Espejo Roig
José Espejo Roig

Reputation: 75

How to pass data from father to son Component in a *ngFor Angular structure

I'm learning Angular X and I try to pass some data from father to son component in a *ngFor structure.

This is my code I tried up to now

@Component({
  selector: 'app-row',
  templateUrl: '<div class="rowTime " *ngFor="let row of rows">
                   <app-segment  [row]="row"> </app-segment>
                </div>',
  styleUrls: ['./row.component.css']
})
export class RowComponent implements OnInit {
  @ViewChild('segments') segments:SegmentComponent;
  rows = [{hour:"00:00"},{hour:"00:30"},{hour:"01:00"},{hour:"01:30"}]

  constructor() { }

  ngOnInit() {
  }
}

------------------------------------------------
@Component({
  selector: 'app-segment',
  templateUrl: '<div class="row border-top border-left border-botton ">
                   <div class="segmentHour">{{row}} </div>
               </div>',
  styleUrls: ['./segment.component.css']
})
export class SegmentComponent implements OnInit {

  @Input() row:string 

  constructor() { }

  ngOnInit() {
  }
}

My aim is to pass the "row" value in every cicle of *ngFor to the "segment" Component, and to show it in it.

Up to now I've obtained this:

[object Object] aaaaa  bbbbb
[object Object] aaaaa  bbbbb
[object Object] aaaaa  bbbbb
[object Object] aaaaa  bbbbb

And I,d like to obtain that:

00:00 aaaaa  bbbbb
00:30 aaaaa  bbbbb
01:00 aaaaa  bbbbb
01:30 aaaaa  bbbbb

Upvotes: 0

Views: 314

Answers (2)

Sucharitha Suchi
Sucharitha Suchi

Reputation: 328

replace binding {{row}} with {{row.hour}} will display hour value as expected

Upvotes: 0

Sachin Gupta
Sachin Gupta

Reputation: 5301

What you have done so far is correct. The reason why you are getting [object Object] is that the row that you have passed to the child is an object. You can either use a json pipe: {{row | json}} to view the complete object or print a property of row: {{row.hour}}

Upvotes: 2

Related Questions