-1

I have json file en.json with content: 

{
   "key": "Key"
}

How to use this file and get value by key in template:

{{ dict.key }}

I have tried:

import * as dict from 'en.json';
POV
  • 11,293
  • 34
  • 107
  • 201
  • 2
    Does this answer your question? [Angular 6 - Load JSON from local](https://stackoverflow.com/questions/50924901/angular-6-load-json-from-local) – Vikas Nov 26 '19 at 11:58
  • Let me check please – POV Nov 26 '19 at 11:58
  • You need to add `"resolveJsonModule": true` in your **tsconfig.json** file. Take a look at this answer: https://stackoverflow.com/a/59012097/8718377 – veben Nov 26 '19 at 12:16

2 Answers2

-2

This is the answer to your question (https://stackoverflow.com/a/50925032/9590251) if you wanna include json to app bundle itself, which is irrational.

In most cases you'll need to load it asynchronously, json is either in assets directory of the app, or remote server. But to load it you need to use either HttpModule or, preferable, HttpClientModule, i.e.

getJson(): Observable<MyJsonType> {
  return this.http.get<MyJsonType>('/assets/my.json');
}
Timothy
  • 3,213
  • 2
  • 21
  • 34
  • Why is it irrational to include JSON in the app bundle? – Vikas Nov 26 '19 at 16:50
  • Unless it's within lazy loaded module, it's gonna increase the size of the bundle, which concequently increase app loading time. – Timothy Nov 26 '19 at 17:56
-3

Create new variable, and assign value of dict, then use that new variable in your template.

component.ts

dictObj:object= dict

template.html

<p>dictObj.key<p>
MaSza
  • 435
  • 7
  • 22