title: Convert JSON to object type in Angular
body: <p>I'm having real trouble converting a JSON array to collection of objects in Angular. I've not used Angular for some time, please forgive me if any of my terminology is incorrect.</p>
  
  <p>I have the following products.json file in my project:</p>
  
  <pre><code>[
    {
      "id": 1,
      "name": "Pen",
      "description": "The finest blue pen.",
      "relatedProducts": [2]
    },
    {
      "id": 2,
      "name": "A4 Paper",
      "description": "A4 sized printer paper.",
      "relatedProducts": [1]
    }
  ]
  </code></pre>
  
  <p>This product.ts file:</p>
  
  <pre><code>export class Product {
      Id: number;
      Name: string;
      Description: string;
      RelatedProducts: Array&lt;number&gt;;
  }
  </code></pre>
  
  <p>My app.component.ts file:</p>
  
  <pre><code>import * as ProductsJson from '../../json-data/products.json';
  import { Component, OnInit } from '@angular/core';
  import { Product } from 'src/app/models/product';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent implements OnInit {
    productsJson: any = ProductsJson;
    products: Array&lt;Product&gt;;
  
    ngOnInit() {
      this.products = &lt;Product[]&gt;this.productsJson;
      console.log(this.products);
    }
  }
  </code></pre>
  
  <p>And finally my app.component.html:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li *ngFor="let p of products"&gt;
      {{p.Id}} {{p.Name}}
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/G4b5Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/G4b5Z.png" alt="enter image description here"></a></p>
  
  <p>My console log shows the JSON data but it seems as though I'm making some error trying to convert it to a list of <code>Product</code> objects. This is also preventing me from successfully using <code>ngFor</code> in my view as the console error shows, so nothing shows on the page. How can I perform this conversion correctly so the loop works and this data is shown on the view?</p>