Using static variable across components

Question

I have a data-store TypeScript file which has a few String arrays:

export const servicesData =
    [
        'test',
        'test',
    ];

export const surgeonsData =
    [
        'test',
        'test',
    ];

I then have another Component of which I have multiple instantiated at a time. I want to use the data-store arrays in a static way so I can use them across all instances without reading each time.

Here is a quick abstract of what I have now. Every booking component needs to use the array from the data-model.ts file without rereading it each time.

import { surgeonsData, servicesData } from 'app/data-models.ts'

@Component({
    selector: 'booking',
    template:
        `
          <div *ngFor="let s of surgeons">
            {{s}}
          </div>
        `
})


export default class BookingComponent {

    surgeons = surgeonsData;
    services = servicesData;

    constructor() {}


}

So in my above example every time a new component is made the surgeonData is saved in to the surgeon variable. I want to instead of doing this every time have only one variable that every component can access.

*I want to instead of doing this every time have only one variable that every component can access.* Why? — , Jul 13 '17 at 02:32
@torazaburo there are many components and the real arrays are rather large which was causing it to run very slowly. As there is really no need to save the variable on every instantiation as the data will never change it makes sense to only have one copy that can be used globally. See below answer — Sisky, Jul 13 '17 at 02:37
You are not "saving a variable", and certainly not copying the array. You are merely creating a single reference from a component property to the global value. The performance implications will be negligible. Whatever performance problems you may have, it is highly unlikely they are related to keeping a pointer to a global value in a component property. — , Jul 13 '17 at 02:56

wilsonhobbs · Accepted Answer · 2017-07-13T02:31:03.763

1

Use a service to have access to globally-available, static variables. Trying to do this outside of services will run into problems with Zoning and change detection.

edited Jul 13 '17 at 02:31

answered Jul 13 '17 at 02:12

wilsonhobbs

941
8
18

Why would that be necessary? – Jul 13 '17 at 02:18
My thinking was that having it readily available as a static variable across all component instances would be faster than injecting the service and calling it every time? – Sisky Jul 13 '17 at 02:19
@ScottMackenzie It's less a question of performance, and more a question of simplicity. – Jul 13 '17 at 02:20
1

Well by definition, services are Singletons, and will only be instantiated once. Perhaps your question is if you can have a single global reference to a variable, but that will effectively be the case when Angular compiles. – wilsonhobbs Jul 13 '17 at 02:21
Performance is quite important in this case as there are potentially 50 or so of these components at a time. – Sisky Jul 13 '17 at 02:21
You could run this app for a hundred years without noticing any performance difference. Having said that, simpler is better. – Jul 13 '17 at 02:27
So in my above example every time a new component is made the surgeonData is saved in to the surgeon variable. I want to instead of doing this every time have only one variable that every component can access. – Sisky Jul 13 '17 at 02:28
Yes, this type of thing is exactly what services are for. If you try to do this outside Angular, you may run into issues with change detection, zones, etc. – wilsonhobbs Jul 13 '17 at 02:30
@wilsonhobbs alright thank you for your help I will convert it to a service. – Sisky Jul 13 '17 at 02:31
Please give a specific example of problems with "issues of change detection, zones, etc.". – Jul 13 '17 at 02:34
@torazaburo data you try to access may not be current with the Angular detection cycle. Angular has a zone in which it knows about things happening, and if you try to circumvent things so it doesn't know it's happening, it won't always be current when you make changes to the data. Say you're binding to a `*ngFor` in your component, and you make a change to the data in a non-Angular class. The data in the component will not update because Angular did not know about the update event. – wilsonhobbs Jul 13 '17 at 02:36
Correct me if I'm wrong, but even if you expose these arrays via a service, and access it in your component or template as `service.surgeonsData`, internal changes to the array in the service won't trigger change detection either. For that, you would need the service to publish an observable which you listened to in the component or template. – Jul 13 '17 at 03:01
@torazaburo that is technically correct, if you wanted to listen for the changes, but for accessing properties on load and in child components, you want those to be in Angular's scope. – wilsonhobbs Jul 19 '17 at 16:33

Using static variable across components

1 Answers1