title: Use data in html from local json file - typescript, angular 7
body: <p>I want to import a simple local json file in my angular 7 project and use the data in my HTML file. Just a simple example. I have attached a json file as <strong>data.json</strong>. I want to access the data from this json file in <strong>app.component.html</strong> in place of <strong>{{item}}</strong></p>
  
  <p><strong>app.component.ts</strong></p>
  
  <pre><code>@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    @ViewChild('detailsPanel') details;
    @ViewChild('displayDetails') displayDetails;
  
  
    // Need to access this data from a json file
    title = 'dragNdrop';
    todo = [
      'Get to work',
      'Pick up groceries',
      'Go home',
      'Fall asleep'
    ];
  
    done = [
      'Get up',
      'Brush teeth',
      'Take a shower',
      'Check e-mail',
      'Walk dog'
    ];
  
    elementDetails = "";
  
    drop(event: CdkDragDrop&lt;string[]&gt;) {
      if (event.previousContainer === event.container) {
        moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
      } else {
        transferArrayItem(event.previousContainer.data,
                          event.container.data,
                          event.previousIndex,
                          event.currentIndex);
      }
    }
  
    showDetails(text){
      this.elementDetails = text;
    }
  }
  </code></pre>
  
  <p><strong>app.component.html</strong></p>
  
  <pre><code>&lt;div class="container-fluid" style="padding: 2%;"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;
        &lt;h2&gt;Drag and Drop&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="row"&gt;
      &lt;div class="col-md-3" style="border-right: 1px solid black; height: 100%;"&gt;
        &lt;div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo" [cdkDropListConnectedTo]="[doneList]"
          class="example-list" (cdkDropListDropped)="drop($event)"&gt;
          &lt;div class="example-box" *ngFor="let item of todo" cdkDrag&gt;{{item}}&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="col-md-6"&gt;
        &lt;div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done" [cdkDropListConnectedTo]="[todoList]"
          class="example-list" (cdkDropListDropped)="drop($event)"&gt;
          &lt;p #detailsPanel class="example-box" *ngFor="let item of done" (click)="showDetails(detailsPanel.innerText)" cdkDrag&gt;{{item}}&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>data.json</strong></p>
  
  <pre><code>{
      "list1": [
          "A",
          "B",
          "C",
          "D"
      ]
  }
  </code></pre>