Search code examples
performanceangularangular2-changedetection

Angular performance: component exposes public object with 500+ (sub-) members


I am using angular 4 with Typescript.

I have a static class with lots of public static/constant string members whose values will never change. This class is exposed on many of my components in order to have access to the members from the templates:

Static class:

export class Foo {
    public static foo1: string = "foo 1";
    // ...
    public static foo1000: string = "foo 1000";
}

Example component:

export class FooComponent {
    public foo: Foo = Foo;
}

Example usage in component template:

<div>{{foo.foo123}}</div>
<div>{{foo.foo321}}</div>

The question is:

  • Is this good design regarding performance / change detection?
  • Is there a way to prevent angular from checking (during change detection) specific members (as they don't change anyway)?
  • Or in other words: Can I expose a public member/object with many (string) members in my components without having a negative impact on performance?

By the way: I deliberately don't want to go into details about what and why in order to keep the question simple.


Solution

  • This has been answered here in the meanwhile.

    Short answer: There is no problem with big objects, as angular only checks fields which are actually used/referenced in the template.