CODEWITHSUNDEEP
angular
Alan Pauil
Alan Pauil

Reputation: 209

The products is not listing in app.component.html

I am trying to list the product in an HTML. But the record is not being showed and at the same time the the product list can be seen in JavaScript message. Please somebody can help me to list the record in an html file . Here is my code in app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {
  title = 'Skinet';
  products: any[]=[];
  
  constructor(private http: HttpClient){}

  ngOnInit(): void {
    this.http.get('https://localhost:5001/api/products').subscribe((Response: any) => {
      
      this.products = Response.data;
      console.log(Response.data);
    }, error => {
      console.log(error);
    })
  }

}

In app.component.html

<app-nav-bar></app-nav-bar>
<div class="container" style="margin-top: 140px;">
    <h1>Welcomes to {{title}}!</h1>
    <ul>
        asd
        <li class="list-unstyled" *ngFor="let product of products">  <!-- the Product is not coming -->
        </li>

    </ul>

</div>

Upvotes: 0

Views: 204

Answers (1)

Brian Smith
Brian Smith

Reputation: 1656

You are not displaying anything from the productList.

<ul>
    asd
    <li class="list-unstyled" *ngFor="let product of products">
       {{product.<attributeName>}}
    </li>

</ul>

Additional Recommendations

  1. Use an Interface or Class products: ProductInfo[] = [];. TypeScript allows your JavaScript code to be strongly typed. Take advantage of that feature. Can save you tons of debug time.
  2. Move http calls to a service. 'Single Responsibility rule. Keep your component code a simple and short as possible. It should do one thing and one thing well. Plus it helps with delegation of duties in your project.

https://angular.io/guide/styleguide

Upvotes: 1

Related Questions