Getting data from textarea to method in angular 4 using typescript

Question

I am working on Angular 4. I have an HTML page which contains some data in it.

I want to fetch the HTML data to typescript using angular data binding in JSON format.

After searching through net i have added Forms Module in my appmodule.ts also.

I have tried using HTML DOM. but I am getting below error

can anyone help how to bind using angular so that If I change data it should change in backend also

and how to load the data by fetching from HTML to Typescript.

Thanks in advance

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 < go.ChangedEvent > ();
  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;
  }
}

.diagramsPanel {
  width: 100%;
  white-space: nowrap;
}

.diagramDiv {
  border: 1px solid black;
  display: inline-block;
  vertical-align: top;
  width: 80%;
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.25/go-debug.js"></script>
<div>
  <p>
    system-dynamics works!
  </p>

  <div>
    <button id="SaveButton" (click)="save()">Save</button>
    <button (click)="load()">Load</button>
  </div>
  <textarea [ngModel]="system" id="mySavedModel" style="width:100%; height:400px">{ "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"}
    ] }
  </textarea>
</div>

Answer 1

I have gone through your code, I changed only two things, I initialized system to empty system:any='' in TypeScript and used two way binding [(ngModel)]="system" in HTML that's it.

I also modified the textArea in TypeScript as well, as you can see from the snapshots of output where I set system to "Waqas" and it appears in TextArea in last snapshot.

01- As you can see the input page area and entered text

Output is shown in TypeScript in debugging mode.

Answer 2

You have a lot of possibilities. You can bind to variable using

[(ngmodel)]="system"

Or using variable:

<textarea #myArea></textarea>
<button (click)="load(myArea.value)">Load</button>

Or from @ViewChild():

@ViewChild('myArea') myTextArea: any;

Answer 3

You should probably use JSON.parse() in order to create a JSON Javascript object, so that you could manipulate it, and JSON.stringify() to put it back in you DOM as a string.

load() {
    let diagram = JSON.parse((document.getElementById('mySavedModel') as HTMLInputElement).value); // diagram value is not saved?
    let system = this.system // local variable system is not used?
    console.log(this.system);
    return this.system;
  }
  save() {
    (document.getElementById('mySavedModel') as HTMLInputElement).value = JSON.stringify(diagram);
    this.system = system;
  }