I've been working with a paragraph and app component along with a JSON file:
Here is the code for the app component:
//app.component.ts
import { Component, OnInit } from '@angular/core';
import * as data from 'JsonDataSample1.json'
@Component({
selector: 'app-root',
template: `<app-paragraph [value]='json.caseFileID'></app-paragraph>`,
})
export class AppComponent{
json = data
title = 'af-bifurcated';
}
And here's the paragraph component:
//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;
}
This is the content of the JSON file:
{
"caseFileID": "1234567",
"pdaSubmitterEntity": "Submitter 1",
"propertyDataCollectorName": "Data Collector 1",
"propertyDataCollectorType": "APPRAISER",
"stateCredentialID": "007",
"licenseState": "CA",
"licenseExpiration": "09\/18\/2019"
}
After trying to pass the imported JSON object to the child component, I found that nothing displays. However, if I manually copy the JSON contents and hardcode it into the value of 'json', the code works perfectly. What could be causing this issue? Why am I unable to pass the imported JSON?
LATEST UPDATE
In order to successfully import the JSON file, I had to make the following addition to my tsconfig.json:
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"resolveJsonModule": true,
...
}