how to run JavaScript code in typescript component

Question

I am new in angular and working in angular 5 (typescript) project and i need a JSON validator function, i got a function from internet but it is in purely JavaScript.

I want that function in my component, it actually checks that given JSON is in correct format or not.

<textarea ng-change="updateJsonObject()" ng-model="script" rows="10" 
 class="form-control" style="width: 100%" ng-style="formatting">

    var app = angular.module("app", []);

app.controller("mainController", function($scope) {
  $scope.formatting = {color: 'green', 'background-color':'#d0e9c6'};
  $scope.message = {
                BasketCost: '5.00',
                Fruit: ['Apple', 'Orange', {Name: 'Pear', Expires: '15/05/17'}],
  };

  $scope.isValid = true;

  $scope.script = JSON.stringify($scope.message);

  $scope.updateJsonObject = function() {
    try {
      JSON.parse($scope.script);
    } catch (e) {
      $scope.isValid = false;
      $scope.formatting = {color: 'red', 'background-color':'#f2dede'};
    }

    $scope.message = JSON.parse($scope.script);
    $scope.isValid = true;
    $scope.formatting = {color: 'green', 'background-color':'#d0e9c6'};
  };
});

what is the way to add this code in my component.ts,

That should be a fairly easy task, it's converting AngularJs code to Angular. Cf. angular.io/guide/upgrade — johey
– johey, Commented Dec 31, 2018 at 12:49

rijin · Accepted Answer · 2018-12-31 13:01:42Z

2

You can follow url https://stackblitz.com/edit/angular-8jjx4b

ngModelChange you need to use ngModelChange for reflecting the changes immediately.

<textarea (change)="updateJsonObject()" (ngModelChange)="updateJsonObject()" [(ngModel)]="script" rows="10" 
 class="form-control" style="width: 100%" [ngStyle]="formatting"></textarea>

// in class

  message = {
    BasketCost: '5.00',
    Fruit: ['Apple', 'Orange', { Name: 'Pear', Expires: '15/05/17' }],
  };

  isValid = true;

  // script = '{' + JSON.stringify(this.message) + ')'; // testing
  script = JSON.stringify(this.message) ;


  formatting = { color: 'green', 'background-color': '#d0e9c6' };


  ngOnInit() {
    this.updateJsonObject();
  }

  updateJsonObject() {
    try {
      JSON.parse(this.script);
      this.formatting = {color: 'green', 'background-color':'#d0e9c6'};
      console.log('invalid');
    } catch (e) {
      console.log('invalid');
      this.isValid = false;
      this.formatting = {color: 'red', 'background-color':'#f2dede'};
    }
  }

answered Dec 31, 2018 at 13:01

rijin

1,76714 silver badges23 bronze badges

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

5 Comments

Raza Ellahi Over a year ago

It works fine but there is a little issue, when I lose the focus i mean when the field is untouched then the error occurs if any

rijin Over a year ago

yes..that case we are handling inside ngOnInit. Or if you expecting any api call to resolve its better to call updateJsonObject inside the resposne block

rijin Over a year ago

its already there. ngOnInit() { this.updateJsonObject(); }

rijin Over a year ago

Yea, thats why we are suing ngmodelchange

Raza Ellahi Over a year ago

ok i got it, just need this modifications (ngModelChange)="updateJsonObject($event)" and not need for (change) event

Collectives™ on Stack Overflow

how to run JavaScript code in typescript component

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related