Angular Function Call in HTML

Question

I have an Angular Project and in one component i want to show data by calling a function to the corresponding component.ts.

For example (very simplified)

<div *ngFor="let article of article">
  <h1>{{getTitle(article)}}</h1>
</div>

If i check a console.log in the getTitle function there are a lot of logs, thus the function gets triggerd due to angular events to rerender i would say.

Now i am thinking maybe it is not the best idea to do it in this way? Assumed lot of data in a ngfor loop are shown. What do you think?

Definitely not the way to do it. In your controller, set a title property on the articles when the list changes. Function calls In template are almost universally bad — bryan60
– bryan60, Commented Jul 2, 2020 at 16:53
you are already using ngfor which means you are iterating an array of I assume objects. shouldn't your title be there? — Mohamed Aljamil
– Mohamed Aljamil, Commented Jul 2, 2020 at 17:02
yea it is there, it was just a very simplified example. In praxis i do calculations there... — Dalitos
– Dalitos, Commented Jul 2, 2020 at 20:19

fatalcoder524 · Accepted Answer · 2020-07-02 17:06:39Z

2

You can do something like this.

component.ts:

class Article
{
title:string
author:string
}
articles=[
new Article("title1","author1"),
new Article("title2","author2")
];

component.html:

<div *ngFor="let article of article">
  <h1>{{article.title}}</h1>
</div>

answered Jul 2, 2020 at 17:06

fatalcoder524

1,4811 gold badge9 silver badges17 bronze badges

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

4 Comments

Rick Over a year ago

yes your data should be set up to include title as part of your data. don't try calling a function from your html. that is never a good idea.

Dalitos Over a year ago

can you also say why its a bad idea, just getting trouble with performance or are there other reasons?

fatalcoder524 Over a year ago

Accept the answer if it satisfied you. Thank you.

fatalcoder524 Over a year ago

@Dalitos If you are working on long list of objects, the function has to run each time. In this method all those resources are saved.

Collectives™ on Stack Overflow

Angular Function Call in HTML

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related