Is it a good practice to use Function calls inside {} (Curly Brackets)?

up vote
6
down vote

favorite

Is it a good practice to use Function calls inside (Curly Brackets)?

Is there any way to do this? within the component, for example (maybe using ngOnChanges or anything like that...)

Template

<div class="container">
 bootstrap() 
 validate() 
 <textarea class="form-control"> fullHtml </textarea>
 <button (click)="copy()" class="btn btn-primary">Click to Copy HTML</button>
 <textarea class="form-control"> validator </textarea>
 <button (click)="copy()" class="btn btn-warning">Click to Copy Validate</button>

 <button class="btn btn-danger" (click)="add()">Add page and input</button>
</div>

Component

class HomeComponent 
 fullHtml = "";
 validator = "";
 pages = [
 "name": "Page 1"
 ,
 "name": "Page 2"
 ];

 inputs = [
 "name": "input_1",
 "required": true
 ,
 "name": "input_2",
 "required": false
 ];

 public bootstrap() 
 this.fullHtml = this.pages.map((page, pageNumber) => 
 return '<div class="row">' +
 page.name +
 '</div>'
 ).join('')
 

 public validate()
 this.validator = this.inputs.map((input, i) => 
 return '"' + input.name + '" => [' + (input.required? 'required': 'nullable') + '],n';
 ).join('')
 

 public copy()
 alert("under construction");
 

 public add()
 this.pages.push(
 name: "page 3"
 );
 this.inputs.push(
 "name": "input_3",
 "required": true
 );

https://jsfiddle.net/1hk7knwq/10283/

ps. I need to display HTML content in a textarea, that's why I'm doing the html inside the component.

asked 2 hours ago

carlos

524

I would probably avoid doing it, but if you have to do it in any case do not forget to sanitize it.
â€“Â arbghl
2 hours ago

add a commentÂ |Â

up vote
6
down vote

favorite

Is it a good practice to use Function calls inside (Curly Brackets)?

Is there any way to do this? within the component, for example (maybe using ngOnChanges or anything like that...)

Template

<div class="container">
 bootstrap() 
 validate() 
 <textarea class="form-control"> fullHtml </textarea>
 <button (click)="copy()" class="btn btn-primary">Click to Copy HTML</button>
 <textarea class="form-control"> validator </textarea>
 <button (click)="copy()" class="btn btn-warning">Click to Copy Validate</button>

 <button class="btn btn-danger" (click)="add()">Add page and input</button>
</div>

Component

class HomeComponent 
 fullHtml = "";
 validator = "";
 pages = [
 "name": "Page 1"
 ,
 "name": "Page 2"
 ];

 inputs = [
 "name": "input_1",
 "required": true
 ,
 "name": "input_2",
 "required": false
 ];

 public bootstrap() 
 this.fullHtml = this.pages.map((page, pageNumber) => 
 return '<div class="row">' +
 page.name +
 '</div>'
 ).join('')
 

 public validate()
 this.validator = this.inputs.map((input, i) => 
 return '"' + input.name + '" => [' + (input.required? 'required': 'nullable') + '],n';
 ).join('')
 

 public copy()
 alert("under construction");
 

 public add()
 this.pages.push(
 name: "page 3"
 );
 this.inputs.push(
 "name": "input_3",
 "required": true
 );

https://jsfiddle.net/1hk7knwq/10283/

ps. I need to display HTML content in a textarea, that's why I'm doing the html inside the component.

asked 2 hours ago

carlos

524

I would probably avoid doing it, but if you have to do it in any case do not forget to sanitize it.
â€“Â arbghl
2 hours ago

add a commentÂ |Â

up vote
6
down vote

favorite

Is it a good practice to use Function calls inside (Curly Brackets)?

Is there any way to do this? within the component, for example (maybe using ngOnChanges or anything like that...)

Template

<div class="container">
 bootstrap() 
 validate() 
 <textarea class="form-control"> fullHtml </textarea>
 <button (click)="copy()" class="btn btn-primary">Click to Copy HTML</button>
 <textarea class="form-control"> validator </textarea>
 <button (click)="copy()" class="btn btn-warning">Click to Copy Validate</button>

 <button class="btn btn-danger" (click)="add()">Add page and input</button>
</div>

Component

class HomeComponent 
 fullHtml = "";
 validator = "";
 pages = [
 "name": "Page 1"
 ,
 "name": "Page 2"
 ];

 inputs = [
 "name": "input_1",
 "required": true
 ,
 "name": "input_2",
 "required": false
 ];

 public bootstrap() 
 this.fullHtml = this.pages.map((page, pageNumber) => 
 return '<div class="row">' +
 page.name +
 '</div>'
 ).join('')
 

 public validate()
 this.validator = this.inputs.map((input, i) => 
 return '"' + input.name + '" => [' + (input.required? 'required': 'nullable') + '],n';
 ).join('')
 

 public copy()
 alert("under construction");
 

 public add()
 this.pages.push(
 name: "page 3"
 );
 this.inputs.push(
 "name": "input_3",
 "required": true
 );

https://jsfiddle.net/1hk7knwq/10283/

ps. I need to display HTML content in a textarea, that's why I'm doing the html inside the component.

asked 2 hours ago

carlos

524

Is it a good practice to use Function calls inside (Curly Brackets)?

Is there any way to do this? within the component, for example (maybe using ngOnChanges or anything like that...)

Template

<div class="container">
 bootstrap() 
 validate() 
 <textarea class="form-control"> fullHtml </textarea>
 <button (click)="copy()" class="btn btn-primary">Click to Copy HTML</button>
 <textarea class="form-control"> validator </textarea>
 <button (click)="copy()" class="btn btn-warning">Click to Copy Validate</button>

 <button class="btn btn-danger" (click)="add()">Add page and input</button>
</div>

Component

class HomeComponent 
 fullHtml = "";
 validator = "";
 pages = [
 "name": "Page 1"
 ,
 "name": "Page 2"
 ];

 inputs = [
 "name": "input_1",
 "required": true
 ,
 "name": "input_2",
 "required": false
 ];

 public bootstrap() 
 this.fullHtml = this.pages.map((page, pageNumber) => 
 return '<div class="row">' +
 page.name +
 '</div>'
 ).join('')
 

 public validate()
 this.validator = this.inputs.map((input, i) => 
 return '"' + input.name + '" => [' + (input.required? 'required': 'nullable') + '],n';
 ).join('')
 

 public copy()
 alert("under construction");
 

 public add()
 this.pages.push(
 name: "page 3"
 );
 this.inputs.push(
 "name": "input_3",
 "required": true
 );

https://jsfiddle.net/1hk7knwq/10283/

ps. I need to display HTML content in a textarea, that's why I'm doing the html inside the component.

javascript angular

asked 2 hours ago

carlos

524

asked 2 hours ago

carlos

524

asked 2 hours ago

carlos

524

asked 2 hours ago

carlos

524

asked 2 hours ago

carlos

524

I would probably avoid doing it, but if you have to do it in any case do not forget to sanitize it.
â€“Â arbghl
2 hours ago

add a commentÂ |Â

I would probably avoid doing it, but if you have to do it in any case do not forget to sanitize it.
â€“Â arbghl
2 hours ago

I would probably avoid doing it, but if you have to do it in any case do not forget to sanitize it.
â€“Â arbghl
2 hours ago

add a commentÂ |Â

2 Answers
2

active

oldest

votes

up vote
6
down vote

The answer for your question is: it depends.

If the execution time of the function is short, that's fine. In case the function includes many complex calculation which take a quite long time to finish, then it might cause a serious problem with user experience.

This is what the Angular team said in their official document:

Quick execution

Angular executes template expressions after every change detection
cycle. Change detection cycles are triggered by many asynchronous
activities such as promise resolutions, http results, timer events,
keypresses and mouse moves.

Expressions should finish quickly or the user experience may drag,
especially on slower devices. Consider caching values when their
computation is expensive.

For more information, you could read it at: https://angular.io/guide/template-syntax#quick-execution

Hopefully, that helps.

edited 1 hour ago

answered 2 hours ago

NguyÃ¡Â»Â…n Thanh TÃº

601112

New contributor

add a commentÂ |Â

up vote
1
down vote

Function calls inside handlebars (double curlies) are legit. However, if you console.log in the function you will see it is called often so best to keep it lightweight as possible or memoize it if it is a pure function. See lodash memoize.

If the function has no arguments (or can be rewritten to accept no arguments) then you can use a TypeScript getter instead like so:

get something() 
 // do some code here
 // return 5

And now you can just use something in the HTML template. Worth placing a console.log here to see if it is called less times than the function equivalent.

answered 2 hours ago

danday74

15.5k970116

add a commentÂ |Â

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',
convertImagesToLinks: true,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f52528553%2fis-it-a-good-practice-to-use-function-calls-inside-curly-brackets%23new-answer', 'question_page');

);

Post as a guest

Name

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

up vote
6
down vote

The answer for your question is: it depends.

This is what the Angular team said in their official document:

Quick execution

Angular executes template expressions after every change detection
cycle. Change detection cycles are triggered by many asynchronous
activities such as promise resolutions, http results, timer events,
keypresses and mouse moves.

Expressions should finish quickly or the user experience may drag,
especially on slower devices. Consider caching values when their
computation is expensive.

For more information, you could read it at: https://angular.io/guide/template-syntax#quick-execution

Hopefully, that helps.

edited 1 hour ago

answered 2 hours ago

NguyÃ¡Â»Â…n Thanh TÃº

601112

New contributor

add a commentÂ |Â

up vote
6
down vote

The answer for your question is: it depends.

This is what the Angular team said in their official document:

Quick execution

Angular executes template expressions after every change detection
cycle. Change detection cycles are triggered by many asynchronous
activities such as promise resolutions, http results, timer events,
keypresses and mouse moves.

Expressions should finish quickly or the user experience may drag,
especially on slower devices. Consider caching values when their
computation is expensive.

For more information, you could read it at: https://angular.io/guide/template-syntax#quick-execution

Hopefully, that helps.

edited 1 hour ago

answered 2 hours ago

NguyÃ¡Â»Â…n Thanh TÃº

601112

New contributor

add a commentÂ |Â

up vote
6
down vote

The answer for your question is: it depends.

This is what the Angular team said in their official document:

Quick execution

Angular executes template expressions after every change detection
cycle. Change detection cycles are triggered by many asynchronous
activities such as promise resolutions, http results, timer events,
keypresses and mouse moves.

Expressions should finish quickly or the user experience may drag,
especially on slower devices. Consider caching values when their
computation is expensive.

For more information, you could read it at: https://angular.io/guide/template-syntax#quick-execution

Hopefully, that helps.

edited 1 hour ago

answered 2 hours ago

NguyÃ¡Â»Â…n Thanh TÃº

601112

New contributor

The answer for your question is: it depends.

This is what the Angular team said in their official document:

Quick execution

Angular executes template expressions after every change detection
cycle. Change detection cycles are triggered by many asynchronous
activities such as promise resolutions, http results, timer events,
keypresses and mouse moves.

Expressions should finish quickly or the user experience may drag,
especially on slower devices. Consider caching values when their
computation is expensive.

For more information, you could read it at: https://angular.io/guide/template-syntax#quick-execution

Hopefully, that helps.

edited 1 hour ago

answered 2 hours ago

NguyÃ¡Â»Â…n Thanh TÃº

601112

New contributor

edited 1 hour ago

answered 2 hours ago

NguyÃ¡Â»Â…n Thanh TÃº

601112

New contributor

answered 2 hours ago

NguyÃ¡Â»Â…n Thanh TÃº

601112

answered 2 hours ago

NguyÃ¡Â»Â…n Thanh TÃº

601112

New contributor

NguyÃ¡Â»Â…n Thanh TÃº is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

add a commentÂ |Â

up vote
1
down vote

If the function has no arguments (or can be rewritten to accept no arguments) then you can use a TypeScript getter instead like so:

get something() 
 // do some code here
 // return 5

And now you can just use something in the HTML template. Worth placing a console.log here to see if it is called less times than the function equivalent.

answered 2 hours ago

danday74

15.5k970116

add a commentÂ |Â

up vote
1
down vote

If the function has no arguments (or can be rewritten to accept no arguments) then you can use a TypeScript getter instead like so:

get something() 
 // do some code here
 // return 5

And now you can just use something in the HTML template. Worth placing a console.log here to see if it is called less times than the function equivalent.

answered 2 hours ago

danday74

15.5k970116

add a commentÂ |Â

up vote
1
down vote

If the function has no arguments (or can be rewritten to accept no arguments) then you can use a TypeScript getter instead like so:

get something() 
 // do some code here
 // return 5

And now you can just use something in the HTML template. Worth placing a console.log here to see if it is called less times than the function equivalent.

answered 2 hours ago

danday74

15.5k970116

If the function has no arguments (or can be rewritten to accept no arguments) then you can use a TypeScript getter instead like so:

get something() 
 // do some code here
 // return 5

And now you can just use something in the HTML template. Worth placing a console.log here to see if it is called less times than the function equivalent.

answered 2 hours ago

danday74

15.5k970116

answered 2 hours ago

danday74

15.5k970116

answered 2 hours ago

danday74

15.5k970116

answered 2 hours ago

danday74

15.5k970116

add a commentÂ |Â

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

Search This Blog

Iyfjky