CODEWITHSUNDEEP
angularangular2-directivesngx-translate
nipuna-g
nipuna-g

Reputation: 6652

Angular 2 impure pipe vs directive performance

I am looking at the ngx-translates two ways of giving the translate input.

  1. Either as a pipe {{'messageId' | translate}}
  2. OR as a directive <span [translate]="'messageId'">

The pipe is an Impure pipe that can handle the translation and any async loading of text. The downside to this approach that I see is that the this gets triggered every time that the digest cycles runs.

The other approach would be using the directive. In which case, we can control when the methods gets fired by using Events or Observables. This method would reduce the unnecessary updates.

But since directives manipulating the DOM, my question is will the directive approach make things slower overall? Also, is there a way to measure the performance of one over the other?

Upvotes: 2

Views: 999

Answers (1)

Chandermani
Chandermani

Reputation: 42669

Interpolation in Angular are syntactic sugar over property bindings. As explained in the documentation, these two are same

<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>

So if you see benefits of property binding, go for it.

Upvotes: 3

Related Questions