title: Getting data from textarea to method in angular 4 using typescript
body: <p>I am working on Angular 4.
  I have an HTML page which contains some data in it.</p>
  
  <p>I want to fetch the HTML data to typescript using angular data binding in JSON format.</p>
  
  <p>After searching through net i have added <strong>Forms Module</strong> in my <code>appmodule.ts</code> also.</p>
  
  <p>I have tried using HTML DOM. but I am getting below error</p>
  
  <p><a href="https://i.stack.imgur.com/kxQDJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kxQDJ.png" alt="Cannot read property"></a></p>
  
  <p>can anyone help how to bind using angular so that <strong>If I change data it should change in backend also</strong></p>
  
  <p>and <strong>how to load the data by fetching from HTML to Typescript</strong>.</p>
  
  <p><code>Thanks in advance</code></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {
    Component,
    OnInit,
    ViewChild,
    ElementRef,
    Input,
    Output,
    EventEmitter
  } from '@angular/core';
  export class SystemDynamicsComponent implements OnInit {
    system: any;
    @ViewChild('diagramDiv')
    private diagramRef: ElementRef;
    @Input()
    get model(): go.Model {
      return diagram.model;
      console.log('get', diagram.model);
    }
    set model(val: go.Model) {
      diagram.model = val;
      console.log('set', diagram.model);
    }
    // @Output()
    modelChanged = new EventEmitter &lt; go.ChangedEvent &gt; ();
    constructor() {}
    ngOnInit() {}
    load() {
      let diagram = fromJson((document.getElementById('mySavedModel') as HTMLInputElement).value);
      let system = this.system
      console.log(this.system);
      return this.system;
    }
    save() {
      (document.getElementById('mySavedModel') as HTMLInputElement).value = diagram.toJson();
      this.system = system;
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.diagramsPanel {
    width: 100%;
    white-space: nowrap;
  }
  
  .diagramDiv {
    border: 1px solid black;
    display: inline-block;
    vertical-align: top;
    width: 80%;
    height: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.25/go-debug.js"&gt;&lt;/script&gt;
  &lt;div&gt;
    &lt;p&gt;
      system-dynamics works!
    &lt;/p&gt;
  
    &lt;div&gt;
      &lt;button id="SaveButton" (click)="save()"&gt;Save&lt;/button&gt;
      &lt;button (click)="load()"&gt;Load&lt;/button&gt;
    &lt;/div&gt;
    &lt;textarea [ngModel]="system" id="mySavedModel" style="width:100%; height:400px"&gt;{ "class": "go.GraphLinksModel", "linkLabelKeysProperty": "labelKeys", "nodeDataArray": [ {"key":"grass", "category":"stock",
      "label":"Grass", "loc":"30 220", "label_offset":"0.5 0.5 0 30"}, {"key":"cloud1", "category":"cloud", "loc":"200 220"},
      {"key":"sheep", "category":"stock", "label":"Sheep", "loc":"30 20","label_offset":"0.5 0.5 0 -30"}, {"key":"cloud2",
      "category":"cloud", "loc":"200 20"}, {"key":"cloud3", "category":"cloud", "loc":"-150 220"}, {"key":"grass_loss", "category":"valve",
      "label":"grass_loss","label_offset":"0.5 0.5 0 20" }, {"key":"grazing", "category":"valve", "label":"grazing","label_offset":"0.5
      0.5 45 0" }, {"key":"growth", "category":"valve", "label":"growth","label_offset":"0.5 0.5 0 20" }, {"key":"sheep_loss",
      "category":"valve", "label":"sheep_loss","label_offset":"0.5 0.5 0 20" }, {"key":"k1", "category":"variable", "label":"good
      weather", "loc": "-80 100"}, {"key":"k2", "category":"variable", "label":"bad weather", "loc": "100 150"}, {"key":"k3",
      "category":"variable", "label":"wolves", "loc": "150 -40"} ], "linkDataArray": [ {"from":"grass", "to":"cloud1", "category":"flow",
      "labelKeys":[ "grass_loss" ]}, {"from":"sheep", "to":"cloud2", "category":"flow", "labelKeys":[ "sheep_loss" ]}, {"from":"grass",
      "to":"sheep", "category":"flow", "labelKeys":[ "grazing" ]}, {"from":"cloud3", "to":"grass", "category":"flow", "labelKeys":[
      "growth" ]}, {"from":"grass", "to":"grass_loss", "category":"influence"}, {"from":"sheep", "to":"sheep_loss", "category":"influence"},
      {"from":"grass", "to":"growth", "category":"influence"}, {"from":"grass", "to":"grazing", "category":"influence"}, {"from":"sheep",
      "to":"grazing", "category":"influence"}, {"from":"k1", "to":"growth", "category":"influence"}, {"from":"k1", "to":"grazing",
      "category":"influence"}, {"from":"k2", "to":"grass_loss", "category":"influence"}, {"from":"k3", "to":"sheep_loss", "category":"influence"}
      ] }
    &lt;/textarea&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>