title: Mocking data for Angular2/typescript with my own model type properties
body: <p>I'm new in the Angular2 world. For learning Angular I followed different tutorials and now I try to build a shop to learn more. But i get stuck right away.</p>
  
  <p>I'm trying to get this model in to Angular:
  <a href="https://i.stack.imgur.com/oTSjN.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oTSjN.png" alt="enter image description here"></a></p>
  
  <p>But I'm not succeeding. I get different errors like.</p>
  
  <blockquote>
    <p>TypeError: Cannot read property 'description' of undefined and error
    TS2322: Type '{ ... }' is not assignable to type 'Product[]'.Type ...</p>
  </blockquote>
  
  <p>This is what i got so far:</p>
  
  <p>Product-type-attribute-model</p>
  
  <pre><code>export class ProductTypeAttribute {
  id: number;
  name: string;
  content: string;
  }
  </code></pre>
  
  <p>Product-type-model</p>
  
  <pre><code>import { ProductTypeAttribute } from './product-type-attribute.model';
  
  export class ProductType {
      id: number;
      name: string;
      description: string;
      attributeTypes: ProductTypeAttribute[];
  }
  </code></pre>
  
  <p>Product-model</p>
  
  <pre><code>import { ProductType} from './product-type.model';
  
  export class Product  {
      id: number;
      name: string;
      description: string;
      image: string;
      price: number;
      type: ProductType;
  }
  </code></pre>
  
  <p>Mock-product</p>
  
  <pre><code>import { Product } from './product.model';
  import { ProductType } from './product-type.model';
  import { ProductTypeAttribute } from './product-type-attribute.model';
  
  export const productTypeAttributes: ProductTypeAttribute[] = [
      {
          id: 1,
          name: 'Kleur',
          content: 'test'
      },
      {
          id: 2,
          name: 'test',
          content: 'test'
      },
      {
          id: 3,
          name: 'test',
          content: 'test'
      },
      {
          id: 4,
          name: 'test',
          content: 'test'
      }
  ];
  
  export const productTypeAttributes2: ProductTypeAttribute[] = [
      {
          id: 5,
          name: 'Kleur',
          content: 'test'
      },
      {
          id: 6,
          name: 'test',
          content: 'test'
      },
      {
          id: 7,
          name: 'test',
          content: 'test'
      },
      {
          id: 8,
          name: 'test',
          content: 'test'
      }
  ];
  
  export const productType: ProductType =
      {
          id: 1,
          name: 'Type 1',
          description: 'Description of type 1',
          attributeTypes: productTypeAttributes
      };
  
  export const productType2: ProductType =
      {
          id: 2,
          name: 'Type 2',
          description: 'Description of type 2',
          attributeTypes: productTypeAttributes2
      };
  
  export const products: Product[] = [
      {
          id: 1,
          name: 'Product 1',
          description: 'Description of product 1',
          image: 'https://www.google.nl/imgres?imgurl=https%3A%2F%2Fangular.io%2Fresources%2Fimages%2Flogos%2Fangular2%2Fangular.svg&amp;imgrefurl=https%3A%2F%2Fangular.io%2F&amp;docid=bJoyJcb-C12SHM&amp;tbnid=G_BYSyR7DGpqqM%3A&amp;vet=1&amp;w=800&amp;h=800&amp;bih=1060&amp;biw=1060&amp;q=angular2&amp;ved=0ahUKEwjdrq6it87RAhUEExoKHdXlAYIQMwgcKAAwAA&amp;iact=mrc&amp;uact=8',
          price: 15.15,
          type: productType
      },
      {
          id: 2,
          name: 'Product 2',
          description: 'Description of product 2',
          image: 'https://www.google.nl/imgres?imgurl=https%3A%2F%2Fangular.io%2Fresources%2Fimages%2Flogos%2Fangular2%2Fangular.svg&amp;imgrefurl=https%3A%2F%2Fangular.io%2F&amp;docid=bJoyJcb-C12SHM&amp;tbnid=G_BYSyR7DGpqqM%3A&amp;vet=1&amp;w=800&amp;h=800&amp;bih=1060&amp;biw=1060&amp;q=angular2&amp;ved=0ahUKEwjdrq6it87RAhUEExoKHdXlAYIQMwgcKAAwAA&amp;iact=mrc&amp;uact=8',
          price: 15.15,
          type: productType
      },
      {
          id: 3,
          name: 'Product 3',
          description: 'Description of product 3',
          image: 'https://www.google.nl/imgres?imgurl=https%3A%2F%2Fangular.io%2Fresources%2Fimages%2Flogos%2Fangular2%2Fangular.svg&amp;imgrefurl=https%3A%2F%2Fangular.io%2F&amp;docid=bJoyJcb-C12SHM&amp;tbnid=G_BYSyR7DGpqqM%3A&amp;vet=1&amp;w=800&amp;h=800&amp;bih=1060&amp;biw=1060&amp;q=angular2&amp;ved=0ahUKEwjdrq6it87RAhUEExoKHdXlAYIQMwgcKAAwAA&amp;iact=mrc&amp;uact=8',
          price: 15.15,
          type: productType2
      }
  ];
  </code></pre>
  
  <p>Product-service</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  
  import { Product } from './../shared/product.model';
  import { products } from './../shared/mock-products';
  
  @Injectable()
  export class ProductService {
      getProducts(): Promise&lt;Product[]&gt; {
          return Promise.resolve(products);
      }
  
      getProduct(id: number): Promise&lt;Product&gt; {
          return this.getProducts().then(products =&gt; products.find(product =&gt; product.id === id));
      }
  }
  </code></pre>
  
  <p>Product-component</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { Product } from './../shared/product.model';
  import { ProductService } from './../product/product.service';
  
  @Component({
      selector: 'product',
      template: require('./product.component.html'),
      providers: [ProductService]
  })
  
  export class ProductComponent implements OnInit {
      product: Product;
  
      constructor(private productService: ProductService) { }
  
      getProduct(): void {
          this.productService.getProduct(1).then(product =&gt; this.product = product);
      }
  
      ngOnInit(): void {
          this.getProduct();
      }
  }
  </code></pre>
  
  <p>Product HTML</p>
  
  <pre><code>&lt;div class="product"&gt;
  &lt;div class="header"&gt;
          &lt;h1&gt;{{product?.name}}&lt;/h1&gt;
          &lt;h4&gt;&lt;/h4&gt;
  &lt;/div&gt;
  
  &lt;figure&gt;
      &lt;img src="{{product?.image}}"&gt;
  &lt;/figure&gt;
  
  &lt;section&gt;
      &lt;p&gt;{{product?.description}}&lt;/p&gt;
      &lt;details&gt;
          &lt;summary&gt;Product Features&lt;/summary&gt;
          &lt;ul&gt;
              &lt;li *ngFor="let productAttribute of product?.type?.attributeTypes"&gt;
                  {{productAttribute?.name}}
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/details&gt;
      &lt;button&gt;Buy Now&lt;/button&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p></p>
  
  <p>I hope I explained my problem well and that you guys can help me out here.</p>
  
  <p><strong>UPDATE</strong>
  <a href="https://i.stack.imgur.com/b0NJ0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/b0NJ0.png" alt="enter image description here"></a></p>
  
  <p>*UPDATE**
  Okay, now things are getting crazy.
  When i do this</p>
  
  <pre><code>export const products: ({ id: number;description: string;image: string;price: number;type: Object } |
  { id: number;name: string;description: string;image: string;price: number;type: Object })[] = [
  {
      id: 1,
      description: "Description of product 1",
      image: "https://www.google.nl/imgres?imgurl=https%3A%2F%2Fangular.io%2Fresources%2Fimages%2Flogos%2Fangular2%2Fangular.svg&amp;imgrefurl=https%3A%2F%2Fangular.io%2F&amp;docid=bJoyJcb-C12SHM&amp;tbnid=G_BYSyR7DGpqqM%3A&amp;vet=1&amp;w=800&amp;h=800&amp;bih=1060&amp;biw=1060&amp;q=angular2&amp;ved=0ahUKEwjdrq6it87RAhUEExoKHdXlAYIQMwgcKAAwAA&amp;iact=mrc&amp;uact=8",
      price: 15.15,
      type: productType
  },
  {
      id: 2,
      name: "Product 2",
      description: "Description of product 2",
      image: "https://www.google.nl/imgres?imgurl=https%3A%2F%2Fangular.io%2Fresources%2Fimages%2Flogos%2Fangular2%2Fangular.svg&amp;imgrefurl=https%3A%2F%2Fangular.io%2F&amp;docid=bJoyJcb-C12SHM&amp;tbnid=G_BYSyR7DGpqqM%3A&amp;vet=1&amp;w=800&amp;h=800&amp;bih=1060&amp;biw=1060&amp;q=angular2&amp;ved=0ahUKEwjdrq6it87RAhUEExoKHdXlAYIQMwgcKAAwAA&amp;iact=mrc&amp;uact=8",
      price: 15.15,
      type: productType
  },
  {
      id: 3,
      name: "Product 3",
      description: "Description of product 3",
      image: "https://www.google.nl/imgres?imgurl=https%3A%2F%2Fangular.io%2Fresources%2Fimages%2Flogos%2Fangular2%2Fangular.svg&amp;imgrefurl=https%3A%2F%2Fangular.io%2F&amp;docid=bJoyJcb-C12SHM&amp;tbnid=G_BYSyR7DGpqqM%3A&amp;vet=1&amp;w=800&amp;h=800&amp;bih=1060&amp;biw=1060&amp;q=angular2&amp;ved=0ahUKEwjdrq6it87RAhUEExoKHdXlAYIQMwgcKAAwAA&amp;iact=mrc&amp;uact=8",
      price: 15.15,
      type: productType2
  }
  </code></pre>
  
  <p>It gives no errors, but does not show the name.</p>