title: Not showing my data in Angular UI but showing data to my console
body: <p>I am just facing a strange problem. data is not showing to my angular UI. but when i used postman to show data,it works but from angular it not works. here is my code:-</p>
  <p><code>Products.ts</code></p>
  <pre><code>export interface Products {
      Id : number;
      Name : string;
      Image : string;
      WarehouseList : string;
    }
  
  </code></pre>
  <p><code>Product.component.ts</code></p>
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { EmployeeService } from '../services/employee.service';
  import { ProductService } from '../services/product.service';
  
  import { Products } from '../_interfaces/Products';
  
  @Component({
    selector: 'app-products',
    templateUrl: './products.component.html',
    styleUrls: ['./products.component.scss']
  })
  export class ProductsComponent implements OnInit {
  
    
    product : Products[];
  
    constructor(private service: ProductService) { }
  
    ngOnInit(): void {
      this.service.getAllProduct().subscribe(data=&gt;{
        this.product=data;
        console.log(data);
    })
  }
  }
  
  
  
  
  </code></pre>
  <p><code>Product.component.html</code></p>
  <pre><code> &lt;div class=&quot;container&quot;&gt;
      &lt;button type=&quot;submit&quot; class=&quot;btn btn-success&quot;&gt;ADD EMPLOYEE&lt;/button&gt;
      &lt;table class=&quot;table table-striped&quot; *ngIf=&quot;product&quot;&gt;
  
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt; Name&lt;/th&gt;
                  &lt;th&gt;WarehouseList&lt;/th&gt;
                  &lt;th&gt;Image&lt;/th&gt;
                  &lt;th&gt;Action&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
              &lt;tr *ngFor=&quot;let em of product&quot;&gt;
  
                  &lt;td&gt;{{em.Name}}&lt;/td&gt;
                  &lt;td&gt;{{em.Image}}&lt;/td&gt;
                  &lt;td&gt;{{em.WarehouseList}}&lt;/td&gt;
                  &lt;td&gt;Action&lt;/td&gt;
  
  
              &lt;/tr&gt;
          &lt;/tbody&gt;
  
      &lt;/table&gt;
  &lt;/div&gt; 
    
  </code></pre>
  <p><code>Product.service.ts</code></p>
  <pre><code>import { HttpClient } from '@angular/common/http';
  import { Injectable } from '@angular/core';
  import { Products } from '../_interfaces/Products';
  
  
  @Injectable({
    providedIn: 'root'
  })
  export class ProductService {
  
    constructor(private http : HttpClient) { }
  
    readonly baseUrl = &quot;https://localhost:5001/api/product&quot;;
  
    
  
  
    getAllProduct()
    {
      return this.http.get&lt;Products[]&gt;(this.baseUrl);
    }
  
    
  }
  
  </code></pre>
  <p>here is my output:-
  <a href="https://i.stack.imgur.com/Kj1oW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Kj1oW.png" alt="enter image description here" /></a></p>
  <p>I found my data in my console but not in UI! I am an absolute beginner.I think it should work because i am done already all of necessary things,but why i am facing this kind of annoying issue i am really don't know. how i solve this issue?</p>
  <p><strong>UPDATE</strong></p>
  <p>Here is my backend code</p>
  <p><code>productController.cs</code></p>
  <pre><code>     [HttpGet]
          public async Task&lt; ActionResult&lt;List&lt;ProductToReturnDto&gt;&gt;&gt; GetProducts()
          {
             
              
              var product = await _repo.GetProductsAsync(); 
  
              return product.Select(product =&gt; new ProductToReturnDto{ 
  
                  Id = product.Id,
                  Name = product.Name,
                  Image = product.Image,
                  WarehouseList = product.WarehouseList.WarehouseList,
                  
              }).ToList();                          
          }
  
  
  </code></pre>