9

I have a problem when i call a method from component in the template by interpolation: {{get_method()}}. The method runs, but in infinite loop I don't know why. Any help please ??

the code of method is like this :

get_name() {
  console.log("bonjour");
}

and I call it in my template like this :

{{get_name()}}

and this is the result :

enter image description here

Sangwin Gawande
  • 7,658
  • 8
  • 48
  • 66
Sofiene Ben Khemis
  • 123
  • 1
  • 2
  • 8
  • I think it has to do with the fact that if you are going to interpolate something it most likely needs to have something. As in printing to the console gives angular no data to put in the interpolation. Maybe if you returned an empty string or something this would solve your problem – Matthew Mar 28 '17 at 23:58
  • i already did but the method always loop in the template , it show the value returned in the template but the console still print in infinite loop – Sofiene Ben Khemis Mar 29 '17 at 00:26
  • then it is kinda hard to determine the problem with 2 lines of code. if that is not the issue. – Matthew Mar 29 '17 at 00:28
  • yes , but i have to fix this issue – Sofiene Ben Khemis Mar 29 '17 at 00:32
  • I understand that but 2 lines of code tells you nothing about the problem. It is possible that there is something else wrong and is showing up as another problem entirely – Matthew Mar 29 '17 at 00:50
  • i try it in new project and it's the same thing , this mean there is a trick behind this – Sofiene Ben Khemis Mar 29 '17 at 01:18
  • yes most likely and again it is most likely because there is something else wrong that we cannot see from the provided code. – Matthew Mar 29 '17 at 01:20

3 Answers3

20

You should not use methods in your template, because each time Angular runs change detection, the method will be called, which can happen often. So actually this is not an infinite loop, the method just gets called on each change detection.

To avoid this, you need to change your code to handle the logic of methods in your component, and use variables in your template instead.

AT82
  • 71,416
  • 24
  • 140
  • 167
  • I am in the process of developing a social-network which i need to get the name of user in each post published in the home page (like facebook) , so using of variables in this situation have no sense – Sofiene Ben Khemis Mar 29 '17 at 12:32
  • Well you would have to construct your app so that you can use a variable/variables, you cannot call the method in the template, it will loop endlessly, like you have noticed ;) – AT82 Mar 29 '17 at 12:37
  • I would probably fetch the posts, then all the users for each post. Make an object of the post and user, like: `{post: 'post one', user: 'user one'}` and push each object in an array, which you can then iterate in your template. – AT82 Mar 29 '17 at 12:42
  • im using firebase as database so i get my data as firabaselistobservable and i iterate from this list as i think i can't get an object from two firabaselistobservable – Sofiene Ben Khemis Mar 29 '17 at 12:58
  • You can subscribe to the observable, on which it becomes just a plain JS object (or array) – AT82 Mar 29 '17 at 13:00
2

i finally found the sollution , it's to change Detection Strategy to OnPush for more information visite this link Change Detection Strategy: OnPush

Sofiene Ben Khemis
  • 123
  • 1
  • 2
  • 8
  • 2
    It's still not a good idea to bind a method in the view. The method is still called every time change detection is called, even when it's much less. – Günter Zöchbauer Mar 30 '17 at 15:43
  • i know and this what i want , I am in the process of developing a real time social-network – Sofiene Ben Khemis Mar 30 '17 at 22:04
  • @GünterZöchbauer then what is the best solution other than Change Detection Strategy OnPush, can you please tell me – balajivaishnav May 16 '17 at 10:02
  • The best solution is to assign the value to a field and bind to that field instead. You can use it with or without `OnPush`. – Günter Zöchbauer May 16 '17 at 10:08
  • @GünterZöchbauer if it 's a field ok, but if I want to call a method inside ngif on a button, then how I can do it, If I use change detection strategy the other event in the component are not working, but if am not using the change detection strategy then the method calls take place more than a time, how to get rid of it any idea ?. – balajivaishnav May 16 '17 at 10:29
  • You want to, but it's bad practice, and there is no need, and you shouldn't. – Günter Zöchbauer May 16 '17 at 10:36
0

In your component 

getName:string;
ngOnInit() {
   this.get_name();
}
get_name() {
    console.log("bonjour");
    this.getName = "bonjour";
}

And in your view file 

{{getName}}
bipin patel
  • 2,061
  • 1
  • 13
  • 22
  • I am in the process of developing a social-network which i need to get the name of user in each post published in the home page (like facebook) , so this method won't help me – Sofiene Ben Khemis Mar 29 '17 at 12:34