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>

yes. The data which in textarea is the data which I want to fetch @HrishikeshKale — Keerthi Reddy Yeruva
– Keerthi Reddy Yeruva, Commented Jul 24, 2018 at 9:43

kjppster · Accepted Answer · 2018-07-24 11:25:58Z

6

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;

answered Jul 24, 2018 at 11:25

kjppster

3003 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Keerthi Reddy Yeruva Over a year ago

I have tried [(ngModel)] ="system" but I am getting an error . Can't bind to 'ngmodel' since it isn't a known property of 'textarea'. @Kjppster

kjppster Over a year ago

To use ngModel you need import FormsModule.

Muhammad Waqas Dilawar · Accepted Answer · 2018-07-24 13:07:26Z

2

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.

answered Jul 24, 2018 at 13:07

Muhammad Waqas Dilawar

2,4121 gold badge26 silver badges36 bronze badges

Comments

Augustin R · Accepted Answer · 2018-07-24 10:05:03Z

0

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;
  }

answered Jul 24, 2018 at 10:05

Augustin R

7,8593 gold badges30 silver badges54 bronze badges

2 Comments

Keerthi Reddy Yeruva Over a year ago

Hey @AugustinR Thanks for your suggestion but I want it either in typescript or angular data binding

Augustin R Over a year ago

If vanilla JS can do it, why do you want to use higher-level langage as TS or angular? I think I got your point, maybe you should load your JSON file through a service instead of directly writing it in the DOM, and then display it using Angular data binding (ngModel). For example:

<div *ngFor="let d of myJsonFile.nodeDataArray"> <input [(ngModel)] = "d.key"/> <input [(ngModel)] = "d.category"/> </div>

Collectives™ on Stack Overflow

Getting data from textarea to method in angular 4 using typescript

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related