Receive data from an api and display it on html

Question

I try to do a call API and i would like to show a number of my datas.

My data arrives in tabular.

Currently i have a [objet: Objet]

console.log(this.data) =

1: {products_id: 6128961, products_date_added: "2016-10-04T00:00:00+02:00"}

2: {products_id: 6129048, products_date_added: "2016-10-05T00:00:00+02:00"}

Children component.html:

        <mat-icon><div *ngFor='let data of datas'>{{datas.length}}</div></mat-icon>

Chiledren component.ts

@Input() counterDatasObservable: Observable<any>;
  data = [];

  constructor() {}

  ngOnInit() {
    this.counterDatasObservable.subscribe( datas => {
      this.data = datas;
      console.log(this.data);
      console.log('jesuis là');
      
    });

Parent component.html:

        <app-counter [counterDatasObservable]="dataMlsService.getProducts('EnCours', 'Location')"></app-counter>

My solution is here:

<mat-icon *ngIf='data'>{{data.length}}</mat-icon>

Answer 1

Children component does not know about datas, in html you should use data and not datas variable something like

<mat-icon><div *ngFor='let row of data'>{{data.length}}</div></mat-icon>