Discussion :

[Cursed]

Bonsoir,

Quelle est la différence entre l'utilisation d'une variable et d'une fonction dans un *ngIf ?

Si j'utilise une fonction j'ai remarqué qu'elle sera appelée une tonne de fois, est-ce que c'est aussi le cas pour une variable ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
export class Foo {
 
  foo: boolean = true;
 
  getFoo(): boolean {
    console.log("hello world");
    return foo;
  }
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div *ngIf="getFoo()">
  <p>Hello world !</p>
</div>

Dans cet exemple, est-ce qu'utiliser *ngIf="getFoo()" et *ngIf="foo" reviendrait au même ?

[TIFéç]

Bonjour,

Il me semble qu'il n'y a pas de différence réelle car "ngIf " évalue une "expression".
Néanmoins, il me semble aussi qu'il est recommandé de n'utiliser que des méthodes très performantes car des latences peuvent rapidement apparaitre en cas d'utilisation de fonctions.

[Marco46]

Aucune différence sauf que comme l'explique TIFéç une fonction c'est un traitement donc ça peut rapidement être plus couteux qu'un simple test sur une valeur.

En d'autres termes si ton binding c'est :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div *ngIf="foo">
  <p>Hello world !</p>
</div>

Il n'y a aucune différence avec l'appel à une fonction :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<div *ngIf="getFoo()">
  <p>Hello world !</p>
</div>

dès lors que l'implémentation de la fonction est :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
  getFoo(): boolean {
    return foo;
  }

En revanche si tu commences à faire des traitements plus complexes ça peut rapidement poser problème.

Plus généralement AngularJS et Angular mettent à jour le DOM avec un mécanisme de "two-way data binding".

C'est documenté ici.

On peut y lire par exemple :

Angular processes all data bindings once for each JavaScript event cycle, from the root of the application component tree through all child components.

Ce qui signifie qu'à chaque fois que le navigateur déclenche son event loop, Angular teste chaque binding (propriété ou fonction peu importe) en partant du composant racine.

Il y a un très bon article de Sylvain Pollet-Villard nommé "Comprendre le data binding dans Angular, React et Vue" qui traite de ce sujet. Il date de 2016 et parle d'AngularJS et pas d'Angular mais le fonctionnement n'a pas réellement changé entre les deux frameworks, c'est toujours du two-way binding donc ça reste pertinent.