how to run JavaScript code in typescript component
0
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,
angular typescript
edited Dec 31 '18 at 13:22
georgeawg
33.2k104968
asked Dec 31 '18 at 12:37
Raza EllahiRaza Ellahi
328
add a comment |
0
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,
angular typescript
edited Dec 31 '18 at 13:22
georgeawg
33.2k104968
asked Dec 31 '18 at 12:37
Raza EllahiRaza Ellahi
328
That should be a fairly easy task, it's converting AngularJs code to Angular. Cf. angular.io/guide/upgrade
– johey
Dec 31 '18 at 12:49
add a comment |
0
0
0
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,
angular typescript
edited Dec 31 '18 at 13:22
georgeawg
33.2k104968
asked Dec 31 '18 at 12:37
Raza EllahiRaza Ellahi
328
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,
angular typescript
angular typescript
edited Dec 31 '18 at 13:22
georgeawg
33.2k104968
asked Dec 31 '18 at 12:37
Raza EllahiRaza Ellahi
328
edited Dec 31 '18 at 13:22
georgeawg
33.2k104968
asked Dec 31 '18 at 12:37
Raza EllahiRaza Ellahi
328
edited Dec 31 '18 at 13:22
georgeawg
33.2k104968
edited Dec 31 '18 at 13:22
georgeawg
33.2k104968
edited Dec 31 '18 at 13:22
georgeawg
33.2k104968
33.2k104968
asked Dec 31 '18 at 12:37
Raza EllahiRaza Ellahi
328
asked Dec 31 '18 at 12:37
Raza EllahiRaza Ellahi
328
asked Dec 31 '18 at 12:37
Raza EllahiRaza Ellahi
328
328
That should be a fairly easy task, it's converting AngularJs code to Angular. Cf. angular.io/guide/upgrade
– johey
Dec 31 '18 at 12:49
add a comment |
That should be a fairly easy task, it's converting AngularJs code to Angular. Cf. angular.io/guide/upgrade
– johey
Dec 31 '18 at 12:49
That should be a fairly easy task, it's converting AngularJs code to Angular. Cf. angular.io/guide/upgrade
– johey
Dec 31 '18 at 12:49
That should be a fairly easy task, it's converting AngularJs code to Angular. Cf. angular.io/guide/upgrade
– johey
Dec 31 '18 at 12:49
add a comment |
1 Answer
1
active
oldest
votes
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 '18 at 13:01
rijinrijin
1,029514
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
– Raza Ellahi
Dec 31 '18 at 13:06
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
Dec 31 '18 at 13:07
please can you update it in demo
– Raza Ellahi
Dec 31 '18 at 13:15
its already there. ngOnInit() { this.updateJsonObject(); }
– rijin
Dec 31 '18 at 13:15
can it response instantly when we change the code
– Raza Ellahi
Dec 31 '18 at 13:22
|
show 2 more comments
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53987625%2fhow-to-run-javascript-code-in-typescript-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 '18 at 13:01
rijinrijin
1,029514
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
– Raza Ellahi
Dec 31 '18 at 13:06
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
Dec 31 '18 at 13:07
please can you update it in demo
– Raza Ellahi
Dec 31 '18 at 13:15
its already there. ngOnInit() { this.updateJsonObject(); }
– rijin
Dec 31 '18 at 13:15
can it response instantly when we change the code
– Raza Ellahi
Dec 31 '18 at 13:22
|
show 2 more comments
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 '18 at 13:01
rijinrijin
1,029514
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
– Raza Ellahi
Dec 31 '18 at 13:06
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
Dec 31 '18 at 13:07
please can you update it in demo
– Raza Ellahi
Dec 31 '18 at 13:15
its already there. ngOnInit() { this.updateJsonObject(); }
– rijin
Dec 31 '18 at 13:15
can it response instantly when we change the code
– Raza Ellahi
Dec 31 '18 at 13:22
|
show 2 more comments
2
2
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 '18 at 13:01
rijinrijin
1,029514
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 '18 at 13:01
rijinrijin
1,029514
answered Dec 31 '18 at 13:01
rijinrijin
1,029514
answered Dec 31 '18 at 13:01
rijinrijin
1,029514
answered Dec 31 '18 at 13:01
rijinrijin
1,029514
1,029514
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
– Raza Ellahi
Dec 31 '18 at 13:06
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
Dec 31 '18 at 13:07
please can you update it in demo
– Raza Ellahi
Dec 31 '18 at 13:15
its already there. ngOnInit() { this.updateJsonObject(); }
– rijin
Dec 31 '18 at 13:15
can it response instantly when we change the code
– Raza Ellahi
Dec 31 '18 at 13:22
|
show 2 more comments
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
– Raza Ellahi
Dec 31 '18 at 13:06
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
Dec 31 '18 at 13:07
please can you update it in demo
– Raza Ellahi
Dec 31 '18 at 13:15
its already there. ngOnInit() { this.updateJsonObject(); }
– rijin
Dec 31 '18 at 13:15
can it response instantly when we change the code
– Raza Ellahi
Dec 31 '18 at 13:22
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
– Raza Ellahi
Dec 31 '18 at 13:06
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
– Raza Ellahi
Dec 31 '18 at 13:06
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
Dec 31 '18 at 13:07
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
Dec 31 '18 at 13:07
please can you update it in demo
– Raza Ellahi
Dec 31 '18 at 13:15
please can you update it in demo
– Raza Ellahi
Dec 31 '18 at 13:15
its already there. ngOnInit() { this.updateJsonObject(); }
– rijin
Dec 31 '18 at 13:15
its already there. ngOnInit() { this.updateJsonObject(); }
– rijin
Dec 31 '18 at 13:15
can it response instantly when we change the code
– Raza Ellahi
Dec 31 '18 at 13:22
can it response instantly when we change the code
– Raza Ellahi
Dec 31 '18 at 13:22
|
show 2 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53987625%2fhow-to-run-javascript-code-in-typescript-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
That should be a fairly easy task, it's converting AngularJs code to Angular. Cf. angular.io/guide/upgrade
– johey
Dec 31 '18 at 12:49