Is it bad for performance/loading to add a dynamic namespacer for your css classes via a component property?

Question

Imagine this:

export class MyComponent {

  namespace: string;

  constructor(private globals: Globals) {
    this.namespace = globals.namespace;
  } 
}

And then the template like this:

<div class="{{namespace}}-wrapper">
  <h1 class="{{namespace}}-title"></h1>
  <h2 class="{{namespace}}-subtitle"></h2>
</div>

This gives you complete control over your styling as no 3rd party styles (or very very few since not many will have the same namespace and suffixes) can interfere with your own styles, but what about performance? Let's say I have 20 bindings like this on average per template, does that affect performance in a way that should make you consider not using this approach?

Technically it shouldn't affect performance since it's only a one time binding, but maybe the load time increases by doing this? I haven't found any solid way of testing this so I can't know for certain.

I know about view encapsulation but I want to have an approach that enables me to turn that off and still be sure that nothing will break.

Is there a better way to achieve this perhaps or is this a perfectly good approach?

Answer 1

There is no one-time binding in Angular2. Every time change detection runs, properties used in such bindings are checked for changes.

Angular2 change detection is quite efficient and can be further optimized by using ChangeDetectionStrategy.OnPush.

If you have about 20 bindings per template this can become quite a big total number for the whole application and I'd expect this to harm performance.

I don't see a reason why this could harm load time.