2
\$\begingroup\$

I sometimes find myself using multiple expressions checking on a single flag to control the state of some template, in this example, a Facebook log in button.

On a second look, however, I noticed this pattern might bear a significant performance drawback for making Angular have to update the DOM in multiple places every time a single flag changes.

Mind you, this is a login-button directive so it's not supposed to alternate too much, it's just the latest use case I have on my hands at the moment. Other components might feature busier templates, both in condition expressions and in live updates to the DOM.

Am I just being paranoid? Or is my concern regarding performance impact here justified? Do you know of a better way to implement this (for example: a single ng-if)?

<div class="fb-login">
  <h3 class="fb-login-prompt" unselectable="on">{{ isUserConnected ? 'Welcome' : 'For points' }}</h3>
  <button type="button" class="btn btn-login-fb {{isUserConnected ? 'connected' : ''}}" ng-click="facebookHandler()" unselectable="on">
    <span ng-if="isUserConnected"><img class="btn-fb-picture" ng-src="{{user.image_thumbnail}}" />{{user.name}}</span>
  </button>
</div>
\$\endgroup\$
1
\$\begingroup\$

I think the way you've chosen to do it here is probably the best option. The other reasonable options, as far as I can see, are:

  • moving the h3 content string and button class out of the template, and setting them in code based on isUserConnected. So the HTML for the header would be e.g.:

    <h3 class="fb-login-prompt" unselectable="on">{{loginPromptHeader}}</h3>
    

    This has the disadvantage of having presentation concerns moved out of the template and into the code somewhere.

  • wrapping the entire HTML in an if-else statement, with each branch repeating all of the HTML structure that doesn't change. The disadvantage of this is that it involves much more of a maintenance overhead from repeated code. It wouldn't surprise me if this option was also more processor-intensive, because it involves more DOM elements being created/removed each time.

\$\endgroup\$
  • \$\begingroup\$ First of all thanks for the reply. Secondly, you've stated: "This has the disadvantage of having presentation concerns moved out of the template and into the code somewhere". But isn't the whole point of Angular is it being declarative (i.e. having the logic in the templates)? That is, unless you are referring to an advantage in performance. \$\endgroup\$ – pilau Aug 31 '14 at 15:25
  • \$\begingroup\$ @pilau - Yeah, that's why it would be a disadvantage - I was listing those other options as worse alternatives \$\endgroup\$ – user987356 Sep 1 '14 at 12:45
  • \$\begingroup\$ I can't tag your username, but I got it. I do recommend though to replace "reasonable options" with "unlikely alternatives". :D \$\endgroup\$ – pilau Sep 1 '14 at 13:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.