title: Angular: pass JSON data to child component
body: <p>I have a paragraph and app component, and a JSON file:</p>
  
  <p>app component:</p>
  
  <pre class="lang-js prettyprint-override"><code>
      //app.component.ts
      import { Component, OnInit } from '@angular/core';
      import * as data from 'JsonDataSample1.json'
  
      @Component({
        selector: 'app-root',
        template: `&lt;app-paragraph [value]='json.caseFileID'&gt;&lt;/app-paragraph&gt;`,
      })
  
  
      export class AppComponent{
        json = data
        title = 'af-bifurcated';
      }
  </code></pre>
  
  <p>paragraph component:</p>
  
  <pre class="lang-js prettyprint-override"><code>
      //paragraph.component.ts
      import { Component, Input } from '@angular/core';
  
      @Component({
        selector: 'app-paragraph',
        template: `{{ value }}`,
        styleUrls: ['./paragraph.component.css']
      })
      export class ParagraphComponent {
  
        @Input() value: string;
      }
  </code></pre>
  
  <p>JSON:</p>
  
  <pre><code>
      {
          "caseFileID": "1234567",
          "pdaSubmitterEntity": "Submitter 1",
          "propertyDataCollectorName": "Data Collector 1",
          "propertyDataCollectorType": "APPRAISER",
          "stateCredentialID": "007",
          "licenseState": "CA",
          "licenseExpiration": "09\/18\/2019"
      }
  </code></pre>
  
  <p>When I try to pass the imported JSON object to the child component, nothing displays. But if instead of importing the JSON, I copy it and hardcode the value of json as equal to whatever I copy from the file, the code works. What am I doing wrong here? Why can't I pass the imported JSON?</p>
  
  <p><strong>UPDATE</strong></p>
  
  <p>I have found that in order to get the JSON file properly imported I had to add the following to my <em>tsconfig.json</em>:</p>
  
  <pre><code>
      "compilerOptions": {
          "allowSyntheticDefaultImports": true,
          "resolveJsonModule": true,
          ...
      }
  
  </code></pre>