CODEWITHSUNDEEP
angular8
pranami
pranami

Reputation: 1415

How to loop over an array of objects and display it in UI using angular 8

I am trying to loop over an array of objects and display it in html using Angular 8.

My app.component.ts file is as shown below:

In the above code uptimeDataSet is the array of data that I need to loop over and display on another component.

My app.component.html file looks as shown below:

Finally, I am trying to loop over in my component to display the object in uptime-chart-component.html as below:

But I am not able to get the details in the UI. I am not able to find out where I am going wrong. Can someone please help me with this.

Upvotes: 0

Views: 391

Answers (1)

Priyanka Rao
Priyanka Rao

Reputation: 208

Update your uptime-chart.component.ts file-

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-uptime-chart',
  templateUrl: './uptime-chart.component.html',
  styleUrls: ['./uptime-chart.component.css']
})
export class UptimeChartComponent implements OnInit {

  @Input() chartData: any[];
  
  constructor() { }

  ngOnInit(): void {
   
  }

  
}

You need use @Input to capture the value in your child component. @Input decorator is used when you are passing data from parent to child. I suggest you take a look at this blog to understand- https://fireship.io/lessons/sharing-data-between-angular-components-four-methods/

And I believe, you can change your app.component.html without the *ngFor-

<app-user [chartData]="uptimeDataSet"></app-user>

if this is what you want your result to be

Upvotes: 2

Related Questions