How to render api data in angular?

Question

I am getting some product information from an api which I will like to render on the UI. This is how I am currently fetching the data in my component

export class CheckoutComponent {
  url = `http://localhost:60036/api/groupProducts`;
  items: any = []
  constructor(private http: HttpClient) {
    this.http.get(this.url).toPromise().then(data => {
    console.log(data);
  
    })       
  }
}

and it returns the following

const data = [
    { ProductID: 1, ProductName: 'New phone 1', Price: '600' },
    { ProductID: 3, ProductName: 'New phone 2', Price: '200' },
    { ProductID: 4, ProductName: 'New phone 3', Price: '400' },
];

Now I have the following div block with some hardcoded values but I would like to dynamically populate this list based on what I am getting from the api

<div class="col-25">
    <div class="container">
      <h4>Cart <span class="price" style="color:black"><i class="fa fa-shopping-cart"></i> <b>4</b></span></h4>
      <p><a href="#">Product 1</a> <span class="price">$15</span></p>
      <p><a href="#">Product 2</a> <span class="price">$5</span></p>
      <p><a href="#">Product 3</a> <span class="price">$8</span></p>
      <p><a href="#">Product 4</a> <span class="price">$2</span></p>
      <hr>
      <p>Total <span class="price" style="color:black"><b>$30</b></span></p>
    </div>
  </div>

Answer 1

<p *ngFor="let product of data"><a href="#">{{product.ProductName}}</a> <span class="price">{{product.ProductPrice}}</span></p>

should do the trick.

Answer 2

You need to first assign the data in the component and then you can use a *ngFor to display data in the UI.

<div class="col-25">
    <div class="container" *ngFor="let product of products">
      <p><a href="#">{{product.ProductID}}/a> <span class="price">{{product.Price}}</span></p>
    </div>
  </div>

And in the component

export class CheckoutComponent {
  url = `http://localhost:60036/api/groupProducts`;
  products: any = []
  constructor(private http: HttpClient) {
    this.http.get(this.url).toPromise().then(data => {
    this.products = data;
    console.log(data);
    })       
  }
}

However , I would suggest to look up reactive or template forms from angular site if you want a standard approach. You can also use observables and async pipe to display data.

Answer 3

    total = 0;
  items: any = []
  constructor(private http: HttpClient) {
             this.http.get(this.url).toPromise().then(data => {
                    this.items = data;
        for(let i = 0; i < this.items.length; i++){ 
       this.total = this.total + this.items[i].Price;
        }
                    })       
}
            
                <h4>Cart <span class="price" style="color:black"><i class="fa fa-shopping-cart"></i> <b>4</b></span></h4>
            <p *ngFor="let item of items"><a href="#">{{item.ProductName}}</a><span class="price">{{item.Price}}</span></p>
                  <hr>
                  <p>Total <span class="price" style="color:black"><b>${{total}}</b></span></p>
                </div>