AngularJS expression redundancy in templates

Question

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>

Answer 1

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.